http://www.eco1furniture.ca/
When resizing the page down the main-menu goes to a 2nd line. I know this is supposed to happen with the site being fluid. But is there a way of keeping it fixed (on one line)?
Thanks,
Ken
You can make a few changes to ensure the menu doesn't wrap onto two lines under "normal" conditions, but I don't think you can ever be certain it won't happen. For instance, the menu width will depend on the browser zoom level, font and font-size.
Using my browser defaults, your menu is 865px wide. Taking the gutters into consideration, the max-width of the small-screen stylesheet should be 972px, so the drop down menu appears before the menu goes onto two lines. 975px would be a reasonable value to account for some of the idiosyncrasies of different browsers, but it still assumes the user is at 100% zoom, and using the font and font-size you've specified.
responsive.css - line 51
#media only screen and (max-width: 975px) {
Setting a min-width on the menu itself suffers the same problems and as you discovered causes the menu to extend out of the main wrapper.
Related
I'm working on this wordpress site http://10meilleurs.net and between 480px and 740px width the navigation bar goes into 2 lines instead of only one. I've been trying to figure it out for 2 hours and I don't know how to troubleshoot this anymore.
The text is more than likely too long for the content area at the font size specified; there's simply too many pixels. When this happens, it automatically wraps. You can use CSS to choose the overflow behavior but if the space isn't big enough, it won't work as expected.
You will need to shorten the text or adjust the font-size so that it fits. You can also make the width of the element wider to accommodate.
EDIT after looking at site: You can also make it so that the menu "hamburger" icon appears at a different breakpoint in your CSS.
i am sorry to disturb you all, but i want to understand how a certain margin responsiveness works.
As you can see on this site http://www.trade-ideas.com/about-us/ the navbar, the paragraphs, the h1, h2 and the footer maintain the same left-margin as you resize the browser window (with firefox the effect it's more clear).
It's like when the elements reach the limit of the left margin (that is mean zero), they restart just on the same distance (the same margin-left) that they where before i was starting resize my browser width.
I've noticed that the navbar included in bootstrap also has this left margin responsiveness: as i resize in width my browser's window, the navbar continue to stay in the same left-margin range, restarting every time he reach the zero margin-left.
In fact, on this bootstrap page you can find the exact same effect in all the page's elements (the navbar and the div box on the body) : http://getbootstrap.com/examples/navbar/
With firebug i've tried to search what parameter set this particular effect, but i'm not an expert, and i didn't find a solution.
So, my question is: this left-margin responsiveness it's generated by a set of #media queries instructions to a set of width? Or there is something that i'm missing?
Thank you in advance for all the help that you'll give me.
Andrew
p.s.: i noticed that on http://getbootstrap.com/examples/navbar/ if i delete "margin-left:auto; margin-right:auto;" the effect that i need doesn't show up anymore.
I tried to create a div container with that margin auto on my site, but i was not able to ricreate the effect (maybe that "margin-left-right:auto" it's just a part of the effect).
The media queries are the ones that make sure the website is responsive. The example: http://getbootstrap.com/examples/navbar/ is using media queries to set the width of the container. If you set the media queries to change when the screen width is 700px and when you make the width of the screen smaller. The media queries will register the px of the screen and when the width of the screen is equal 700px the container will change.
Being new to CSS, I have looked at similar posts on stackoverflow regarding this issue, but none of the resolutions seem to help with my site.
I am using a template for the site and trying to edit the CSS so that the page will maintain one width, and not shift it's elements when the window is resized.
An example page can be found here: (removed link for client)
The content is contained within a wrapper currently set to relative position:
#page_wrapper
{
position: relative;
}
I tried to change it to this:
#page_wrapper
{
min-width: 960px;
}
This doesn't seem to be doing the trick though. When I resize the window, everything still shifts. Any ideas what else I need to change?
Your site is using Twitter Bootstrap: twitter.github.com/bootstrap/
It won't be a totally simple process to do what you want but a starting point would be going to this page:
http://twitter.github.com/bootstrap/customize.html
There you could uncheck the "Responsive" checkboxes and change the Grid System elements to be whsatever you want. It may however be best to leave those as they are.
Then download the css files and replace the ones on your site and see if that helps (ensure you make a back-up of your current files first).
There are a few things going on here:
The navigation has float: right on it somewhere. This means that when its width, plus the width of anything it sits next to is wider than its container, it's going to shift so that it can fit.
Your min-width is too narrow If your min-width is 960px, but the width of your navigation, plus the width of your logo (the two elements that sit side by side), plus any margins, paddings, and borders, add up to anything more than 960px, then it's not going to sit in line. You need to either adjust your min-width, or adjust the calculated width of the elements to fit within that 960px minimum. This can be done either by making margins/paddings smaller, decreasing the text size, setting explicit widths, or any combination thereof.
your elements are probably moving around because you have them in the same tag so if you want your elements to hold their positions you need to use a different for each element and align them to your preference perhaps on css or inside the tag(that's up to you). Otherwise in a div tag if you follow the same procedure for each element you shouldn't have any problems. That goes for sentences too... you need to make each word in a sentence be in between individual
Have a look at the homepage: http://benjaminpotter.org/clients/c3carlingford/ now if you make the browser fill the screen like I do (1680x1050) the footer seems to gain an extra hundred or so pxls? Here is my proof:
Normal View:
When I make my browser size bigger:
Its really odd - I need to work this one out.
When you have a look on an IPad its even worse.
Ideas?
Your footer isn't actually becoming larger. If you check out firebug and inspect the element, it is still 100px. Your browser is actually allowing you to scroll past the end of your page, and since your footer's position is relative to your page, it stops when your content does.
You may want to try out a "Sticky Footer" solution... one can be found here: http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
This extra space is not footer (that size doesn't change), but whole html/body, but unfortunately I don't have more precise idea. Error still occurs after disabling JS, so it's not the cause.
The weirdest thing is that it seems to be connected with state of window (is it maximalised or not).
Looks like the height of that #wrapper ends up being around 1354 px. Whenever your screen extends past that height, you get the extra space. Using chrome dev tools, change the background color to something highly visible (I chose red) and then set the #wrapper height to 1500 px or more while you have your screen size maximized. You can see that you are no longer able to scroll down past the bottom of the div as the height of the div is > the available screen resolution height.
I'd take a look at <span id="followme">. In the CSS (style.css), #followme is set to have a height of 100%. If you zoom way out in Chrome, inspect the #followme element, and change your browser size you'll notice that the followme element is actually covering up a lot of the page.
It may not be the only factor you need to look at, but seems to be the most likely culprit when examining it.
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.