I've adapted some CSS to use in a website and can't quite figure out why one aspect of the page is acting the way that it is acting. Basically, when I shrink my window below a certain size horizontally, all of the text "drops down". This becomes an issue if a user is viewing my website through an ipad with vertical orientation. You can view this issue here. I'm hoping to make it so that even if the window gets smaller, the placement of my text remains intact.
The problem is that the area does not have enough space to put both the side navigation and content on one line. Make it automatically adjust the page's width when it exceeds certain decrements of width. This code is an example, and it is highly unlikely for it to work. If I could see the CSS more clearly, then I could provide the exact code.
#media all and (max-width:960px) { /* Assuming the #wrapper is 960px across */
#content {width:560px;} /* As opposed to 720px */
}
Edit
The content drops down at exactly 980px, so you have to shrink the width after there.
#media all and (max-width:980px) {
#container {width:520px;}
}
div#content "drops down" because is set to be float:right which means when you resize the browser the content div to going to be moved with the flow of the page as it gets narrower.
try styling div#wrapper as white-space:nowrap and div#nav_left and div#content both white-space:normal
Related
I am working on my first portofolio project (I'm taking a course on Udacity).
I have studied a bit about Responsiveness lately, but I'm having a hard time wrapping my head around it and understanding which is which (flexbox/ grid system). Therefore, I'm not even sure what I used by now. Grid? Flexbox? I'm completely confused.
The problem I'm currently facing is how to get rid of spaces between content rows when making the page responsive (for example when the viewport is smaller than 1200px, the gap between my main image and the rest of the content gets HUGE).
Please help me.
Here's my code overall:
https://codepen.io/antobloop/pen/LdjZmW
#media screen and (max-width: 1250px){
body {
???
}
}
And here's what im talking about:
Gap between content
You have a 600px height set on the .image so when the page gets more narrow, the image fills the top portion and you see a gap in the empty space.
I changed styles on .image from
height:600px;
to
height: 0;
padding-bottom: 56.25%
This is a little trick to maintain the 16:9 aspect ratio on the container that sets the overall height based on the width of the parent container.
https://codepen.io/Jason_B/pen/dmzpmq
I am creating a menu bar with w3-css. The menu bar should be fixed to the top.
Here is an example, please try to decrease screen width:
https://www.w3schools.com/code/tryit.asp?filename=FEZ9Z1BYNTEX
The problem is, when screen width is set to narrow, and the menu wraps into more than one lines, it covers the first lines of text. Is there a way to solve it somehow?
You can solve this issue by using a media query. Media queries allow you to apply CSS to a site at a certain screen size. For example:
#media (max-width: 650px) {
.w3-container {
padding-top: 40px;
}
}
This CSS pushes the container down at smaller screen sizes so that the menu will never cover up the text below it. Alternatively you could use a media query to make the menu text smaller or hide certain parts of your menu when it gets to smaller sizes.
Most people switch to another form of menu for mobile devices such as a Hamburger menu. This isnt needed to fix the problem you are currently facing but you might want to look into it for your future projects.
Set .w3-top to position sticky instead of fixed. Then remove margin-top from the body.
https://www.w3schools.com/code/tryit.asp?filename=FOC96ENPLRNO
This is the page I'm working on: http://www.vqinteractive.net/temp/index.html
I need the nav side bar and the main content area to evenly stretch to the bottom of the browser (or beyond, with content), whether they be empty or one has more content that the other. I put a border on the surrounding container and that is not stretching either. I'm pretty new to fluid grids and I'm finding all the old tricks, like position: absolute with height: 100%; are blowing out the grid system and height: 100%; alone does nothing.
I've been hunting through threads for the answer but haven't been able to find anything that pertains to responsive design. Also keeping in mind it is set up so the when the content is longer than the browser, the pic on the right stays fixed while the left side scrolls. Any help would be greatly appreciated.
Thanks in advance!
Visually, this is what I'm trying to do, with or without content, scrolling with:
http://www.vqinteractive.net/temp/images/example.gif
I fiddled around with the Google Chrome object inspector, and found this to work pretty well:
#media screen and (min-width: 1241px)
#main {
min-height: 85%; // <---- REMOVE
min-height: 600px; // <---- INSERT
}
The image does not count as content for the box you have set to a min-height=85%, and that box will therefore not expand without a definite min-height. Setting 'min-height: 600px', the box will always be at least the size of the image, and then expand if you add additional content in the box.
What I must change to make the navigation bar fixed when screen size under 940px? I don't want to make it responsive. If you resize your browser windows under 940px you will see that scroolbar-x (bottom-scrollbar) appear, but when you scroll it to the right, the navigation bar position still fixed, and some menu won't appear.
Maybe some picture will explain what my problem.
This can't be done in CSS alone.
The example you give (Twitter) has the navbar with fixed position AND fixed size at all screen sizes. Fixed position means that the scrollbars will not affect the position of the navbar, and this is why you can't use the x-scrollbar to see the part of the navbar which, once it's less than 940px wide, is hidden 'under' the right border of the browser window.
So you have to choose, either
Have a fixed position, fixed size navbar which is present at the top no matter how far the user scrolls down and accept that under a small enough screen they won't be able to scroll horizontally to see it all, OR
Have a fixed position, fluid size navbar which adjusts its width to accommodate different screen sizes, which will hopefully mitigate the need to scroll horizontally in the first place, especially if you let it grow vertically if its contents don't fit in one row, OR
Have a non-fixed position, fixed size navbar which will respond to horizontal scrolling but will not be ever-present when the user scrolls down the page.
Effectively, you can't have position work one way in the x direction and another in y.
You can see what I mean by option 2 by editing the following classes in the Twitter page using the CSS inspector:
.global-nav .container {
width: auto;
max-width: 865px;
}
.global-nav, .global-nav-outer {
height: auto;
}
The second selector implements the vertical fluidity for once the contents can't fit in one row.
You can see what I mean by option 3 by making these changes:
.topbar {
position: absolute;
/* ... the rest as is */
}
EDIT
Of course, that it can't be done in CSS doesn't mean it can't be done at all. Here's a jsfiddle implementing that script you mentioned. This uses MooTools as opposed to jQuery, which I normally use with bootstrap.
The fiddle: http://jsfiddle.net/uadDW/4/
Full screen version to better see the effect: http://jsfiddle.net/uadDW/4/show/
(Thanks to #Sherbrow for providing the base fiddle with which I made this one).
Ran into this same problem and was thrilled with the suggested solution, but then I struggled to implement in my own code (Yes, noobie).
It turns out that there's a conflict here with jquery.js, which I need elsewhere in my code.
http://jsfiddle.net/uadDW/83/
/* code as before .. only added jquery.js link */
Remove jquery.js from the External Resources in the above fiddle and you get the original desired behavior. Rats!
I'm using http://www.cssstickyfooter.com/ for the footer of two sites I'm working on. Seems to be fine on a large monitor, no issues at all.
However when going to a smaller monitor and shrinking the page size down I'm getting a scroll bar at the bottom of the screen and the Footer is not stretching the full width of the screen.
A working example of this issue is here
Just shrink the screen size down and you can see the issue.
Any ideas on how I can fix this. It has also happened on this site I've made
Thanks in advance.
You need to set a min-width for your footer. Currently the footer is correctly adjusting itself to the size of your screen, even if the rest of the content no longer fits on the screen and scrollbars are added.
Find the width at which scrollbars appear and set your footer's min-width to that. Example:
.footer {
min-width: 1000px;
}