http://m.snacknetworx.com/ goes completely 100% wide in a web browser, on an HTC Incredible there is padding and/or margin on both sides.
I created a test page to test replicate the problem:
http://m.snacknetworx.com/test.php
There's only one div with inline css:
test...
Problem being this div does not reach the edges of the HTC browser, same padding and/or margin issue, but goes 100% in a web browser.
Does anyone know how to get 100% width on a mobile browser?
Related
I'm Working on a web site (http://www.iwanttobesanta.com/about_us.html) more specific on About Us/Quem Somos page, that seens to be diferente depending on browser. When window < 500px the navbar (navBar.css) get out of the place in google chrome, but it's seens fine in firefox. Any tips?
It is because of a media query for 500px width. (http://www.iwanttobesanta.com/css/stylesAboutUs.css)
the css for middleTextMob has margin top = 200px. This is causing the header to shift down.
I need some troubleshooting help from some CSS experts. :)
My website at www.daylightfoods.com loads perfectly on full desktop browsers. While the home page on mobile devices works as well, the sub pages on mobile devices have a problem with the navigation div at the top. I am finding that the navigation div (where the grey background is and the navigation links) is not expanding to the full width of the mobile device screen. I can't figure out why, and would love some help!
I have been doing my mobile testing Google Chrome for iOS (both iPhone 5S and iPad).
Here is the page in question:
http://www.daylightfoods.com/sustainability/
It loads perfectly well on desktop versions, but on mobile devices the navigation at the top for some reason is not full 100% width.
Any help would be greatly appreciated!
It is caused by <meta name="viewport" content="width=device-width"> on your subpages
Check if, inside the div, you have any hidden elements for which you have not set "width: 100%".
In my case I had an hidden img (set to only show up only on large screens) that didn't have a "width: 100%" attribute and thus, even when not visible, the image was extending outside of the parent container (the div), preventing the parent container to take all available screen space.
Hope it helps.
When I have the Chrome developer tools open and I resize my site, it neatly tells me the width.
My site is adding a horizontal scrollbar when it drops under 495px. This is odd since I need it to at least be responsive or elastic down to 480px.
I am using percentages for widths, so I'm struggling to find the CSS that's stopping the site from narrowing further.
This can happen if you have a min-width on the entire body element of 480px, perhaps to set the lower limit for phone screens, and the page content is long enough to add a vertical scroll-bar.
The vertical scroll-bar is not accounted for in Chrome's measurement and being 15px wide, the horizontal bar appears when the tool reads 495px since its actually 480 + 15px.
Arguably its a bug in Chrome, maybe its just the way it works. You're best off taking out the min-width anyway and just letting it flex down past 480px.
This is happening to you because the content width is bigger than 480px. It's the same when your page height is higher than your browser. Try css media-queries to set css styles according your browser width. (This is called responsive web)
I'm making a little demo thing for my sister's wedding, I basically want to set the body background to a different image as the user scrolls down the page.
Here is a functioning version of the page.
The process itself works fine, however on:
A desktop mac running Chrome (browser width around 1900px)
The image does not stretch across the page, although the background remains fixed (as it should).
Screenshot of this problem
A mobile phone (android chrome)
The background image does not stay fixed (when the user scrolls down, the background image is left behind). Funnily, I cannot reproduce this in my laptop browser by making my window smaller - possibly a limitation with the mobile browser itself?
Screenshot of this problem
Any thoughts on what I'm missing here?
The image is 1200px wide. So on a 1900 resolution the image doesn't stretch and is smaller :). If you use background-size: 100%; It should stretch.
As for mobile: This question is the same issue as you with solution.
set the
width:100%
margin-left:auto;
margin-right:auto;
in your image tag or div
if the 100% is not work use px for width
When I browse my website on computer, everything looks fine in all major browsers, however, when I check it on Android phone there's a massive gap below footer. This happens only in portrait mode and in all android browsers. When I view it in landscape mode, the gap disappears in all browsers.
I tried 'playing' with viewport meta tag, but it doesn't help.
My site's width: 1300px and height:100%. Also, footer has padding-bottom:0; margin-bottom:0;
What could cause this problem to happen only in portrait mode?
Update: It seems that the height of a page isn't large enough to fill entire screen of my mobile so there's this gap. When I browse the page it's completely zoomed out according to sites width. How to make it zoom in according to site's height instead and thereby eliminate the bottom gap?
Please help
P.S. Unfortunately, I cannot provide you link to the site as it's on a local server.
Ok, guys. I managed to fix it. Probably not the best fix in the world but better than nothing.
So what I did was forced minimum zoom by using viewport minimum-scale=0.6.
No bottom gap after this fix.