I have a website that is responsive and when you scale the site down. The site looks good, but if you scroll to the right there is a blank space because the nav-bar is 1000px wide.
When the site is sclaed down to tablet or phone the nav folds into a special mobile nav but the div from the larger site still remains.
My question is what can I do to make that div scale down with the rest of the site?
You'll see what I mean if you look at the site.
Glacialpace.com
use % for the navbar unit instead of pixels this will allow it to also scale down with the site. also remember to add auto margin to the right and left of the navbar
Related
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
I have designed a responsive website but whenever I view the site when the display width is smaller than 510px wide eg. iPhone or shrinked browser the content works as it should and compresses to the width of the browser but there is a big white space to the right and the user and scroll horizontally.
I find this unusual as there is no media queries for 510px width, just 390px, 700px, 850px, 906px and 960px. Below is a screenshot of what is happening.
Thanks.
You need to remove width:500px; on <h1> elements.
see this FIDDLE
I'm playing around in Bootstrap 3 trying to duplicate the vertical navigation bar used on the getbootstrap site. I'm running into a couple issues though and I'm not finding a lot of documentation to work from.
Here's a bootply link to show you where I'm coming from: http://bootply.com/77832
Issue number 1 is that if I change the screen size from large to small, my navigation is now under my text. But on the bootstrap site the navigation moves to the top of the screen and the text falls under that. How can I fix the responsiveness of this so that resizing or viewing this on a small screen doesn't wreck the layout?
Issue number 2 is cosmetic. I'd like for the pretty pink background on my navigation to fill the entire container rather than just the width of the text. So I thought, hey throw a width:100% on that bad boy and you're all set. I thought that it would fill 100% of the col-md-3 that contains it, but it actually fills 100% of the screen width. Why would it extend out of the col-md-3 that it is in and how can I achieve the desired look?
For #2, the issue is that the UL has a position:fixed, so it sort of "removes" itself from knowing about its parent's width. Basically, it treats the body as the parent, so width: 100% will make it as wide as the page.
For #1, You may want to look at, when the page becomes small, make the nav "not affixed" to the side of the page.
I have a div that is centered on my website using margin: auto;
but for some reason if i start to shrink the width of my browser the div i showed in the image below begisn to move left with the browser, and wont stay in its position. I have tried using the position: thing but it doesnt seem to be working for my issue.
How can i get this div to stay centered and not move with the browser?
You can see the issue here on My Website
If you trysh rinking the browser width beyond a certain point that div just begins to move and isnt centered anymore.
Its a problem because people with small resolutions will not see the website right.
The div that seems to be having the issue is main-frontpage
change to min-width of your #footer to the same as the .jflow-content-slider & #main-frontpage (1050px) and then at least your content slider will not overlap the text at the bottom.
EDIT: looking again at your setup, just change the width of your #main-frontpage to the same as #footer #content-wrapper - 1240px. Really this is way too wide and it should be 960px wide but unless you change the width of your footer content this the only way to do it
I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.
How it displays in wide browser windows:
How it displays in narrow browser windows:
Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?
The page is live here if the CSS will be helpful.
Yes, you should give the <body> a min-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.
-edit-
ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.
The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.
This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go