I am quite some way through a pretty much CSS only solution to make a mobile site for our e-commerce site. It's actually going quite well, apart from the fact that the x-axis consistently has a margin that shouldn't be there - I have put it in the CSS that width is 100% for most properties.
The only thing that has worked in visual practice (it made the y-scrolling really stuttery) was the addition of:
html
{
overflow-x:hidden;
}
So although it looked great and was exactly what I wanted I couldn't get the scrolling to be fixed, which is pointless for a mobile site.
On top of that I also added this to the page to detect screensize:
<meta name="viewport" content="width=device-width,initial-scale=1" />
I think that somewhere the media query is causing havoc:
#media screen and (max-width: 480px) {
Because it is the only place that specifies the 480px aspect of anything, and that's exactly where the margins continue to. So is it something I'm doing wrong here?
In hindsight I'm not entirely sure where I got the 480px from - think it was a copy and paste job!
Other things I have tried were removing the absolute positioning from a lot of elements, making sure everything has width of auto and displaying in a block.
I'm out of ideas and just want everything to be like the overflow-x solution!
Thanks in advance.
As a rule, you shouldn't have to specify width: 100% on anything.
Chances are you have some padding or something on one of those elements causing it to be > 100%. All display: block elements will fill the width by default, you don't need to specify that.
It's not always the padding either, margin-right has caught me out enough times because you can't actually see it but it's there, pushing out the content
My guess is that a padding causes your element to be larger than 100%. If you want to avoid this, you can try applying box-sizing : border-box; to the affected element. Width and height will then include padding so you will actually get 100% ( or X pixels ) of width regardless of the padding and size of border you set.
Related
So I'm working on a quick portfolio and in mobile, the "email me" does not expand across the entire screen as it should, as seen on this screenshot.
I've fiddled around with content width, device width, etc. using numbers, percentages, text values, and nothing has worked to make this page perfect. I rewrote the code to be cleaner and still can't find my mistake. Is it just something I'm overlooking?
You can just view my source to get my code, since the CSS should be there.
UPDATE: I removed the navigation padding and changed all of the device-width values but now the navigation bar does not go completely across. I am very confused since the #navigation and #mobilecontact should essentially have the same widths. I'm using Safari on iPhone.
Can you add the browser and version that you are testing on, because Email me button looks fine for me (occupies entire width) in latest chrome - developer tools.
May be your browser didn't understand 100vw
If you are concerned about the clickable area of "email me" anchor text.
You can make the anchor as display:block, so that it takes up entire row
I think you are using mac safari browser and in safari browser "vw" is not supported so now you can use "px" or "%" and button will be expand.
I have checked.. you need to fix following this
First of all you should remove "width=500" from your meta, highlighted in below image.
Add following in your CSS to fix paddings
* {
box-sizing:border-box;
}
Instead of width: device-width use width: 100% and add more properties in #title . see image
Update CSS for #about, #experience, #skills to width:100%
and thats it you all are done.
Here is final result
All you need to do is to fix font-size
When you want to have a responsive design; you don't need to use specific Width for block level elements.
just
remove numerical width from body's children, then add
body,html
{
width:100%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
and then if you want to set padding or margin to viewport element; the standard way is just one element with specific class handle width like bootstrap container class
So I have managed to achieve the required result.
Basically the extra padding you are adding on <div id="navigation"> (padding-left: 350px) is part of the issue.
Also you are incorrectly using the device-width attribute value. One cannot specify the width of html elements using width=device-width;. Width attribute does not accept device-width as an acceptable value.
So replace that with width=100%; or width=100vw; everywhere you have used it. See here for documentation on responsive web design using viewport meta tag and device-width.
I was able to get the button to occupy 100% of the screen width by making these changes.
Remove padding-left: 350px from <div id="navigation">.
For <div id="title"> and <div id="about"> in the media queries for max-width: 500px, changing width from width: device-width to 100% or 100vw.
Here is the output. Let me know if it works out.
I've looked at many "mysterious white-space at bottom of page" issues here on SO, and played with the viewporttag many times, but I still cannot figure out what I'm doing wrong!
The page in question is: http://www.seniorchoicesunl.com/error_documents/error401.php
Here's what it looks like on mobile from Chrome Dev Tools:
Any Ideas on what I'm doing wrong?
Edit:
setting ANY initial-scale is bad news! It makes the font too tiny!
Take a look:
The desired mobile look, while keeping the desktop and tablets as-is, is this:
P.S. Fixing this issue could reciprocally fix other related issues I'm having with other webpages.
Add this on top of your css file :)
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
it fixed the bug for me.
What's going on here:
You've set width=device-width, this makes the layout size on your page equal to the device's screen width. i.e. making an element 100% will give it the same width as the screen.
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
The sub_container_div element actually ends up being much wider than the layout width of the page. In my case on a Nexus 6, the device-width is 412px while the sub_container_div is 594px wide.
Since the content is wider than device-width, Chrome allows zooming out and loads the page at the minimum zoom level but this doesn't change the layout width/height so height 100% only fills device-width/aspect ratio pixels, which doesn't fill the zoomed out viewport.
The correct way to fix this is to make sure all your content is contained by the layout size. In your case, the reason the sub_container_div is wider than the layout size is that your padding/margins cause it to expand outside the parent. The solution is to add box-sizing: border-box to the sub_container_div and dialog elements and width: 100% to sub_container_div. That way, Chrome can't zoom out and you can't see outside the layout box (in HTML spec language, that's the initial containing block).
I had the same issue on Chrome 77
I fixed the problem by removing height: 100vh on the body tag.
This seems to fix the problem:
Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Override width: 25em; on .sub_container_div in your mobile CSS so that the container scales with the width of the view.
If you do not want the font to scale, it seems just adding initial-scale=0 will work as well. However, this will make the text very hard to read. You can play around with different scales, but it seems just setting it will fix your issue.
In my case one element was too long for a mobile screen and it broke the webflow. After I shortened the width of the long element, the extra white screen was also removed from the footer.
How would I set the minimum width of a webpage?
I thought it would be easy, turns out not...
I want to make it so that, for example, when the screen width is smaller than, say, 1000px, the content to be shown at the size as if the screen was at 1000px but with the scroll bar at the bottom (preferably with css but I can deal with Javascript).
I've read applying min-width to body would do this, but it doesn't (at least on Chrome and Safari).
http://www.w3schools.com/css/css_rwd_viewport.asp
Have a look at this page, it may be of some help.
You can use media queries and set the width of the body tag if it's < 1000
https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
Here is another trick
https://css-tricks.com/almanac/properties/m/min-width/
Here a nice article about it.
Also try sometimes min-width doesn't work with position static if you have so many child element with absolute position.
body {position: relative}
I hope that will help.
On this template I've built using Foundation, everything looks correct and responsive except for both navigation bars. They're both on their own <div class="row">, yet they overlap eachother on window resize.
(There is a #media only screen and (max-width: 767px) that is supposed to make it look even cleaner, if it helps at all).
Actually if you open the page on chrome with the developer tools or in firefox with firebug, you can see that when you make the page smaller than 767px width, is when the problems enters, due your #media only screen and (max-width: 767px). i would recommend to check that css cause if you removed it from the html you get a better result, so you may check what attributes inside that css are making your div crazy.
try adding foundation.css (around line 148) .row class height to 140px and moving main-links somewhere inside top of the main-content? That code seriously need either playing around with heights/margin or div blocks imo :)
Edit: roughly editing foundation.css lines is not what you need, make separate css class for that specific height setting and trigger usage of it with correct media query (width which causes problem to occur). That way you can tune any classes you like around the top navigation, its not pretty but it gets things work.
As Jorge Aguilar said, the problem lied in a float: none that was applied to every <li>. Furthermore, I used a width: 100% property to stretch the elements across the entire screen (like it originally was with the floats, but without the overlapping)
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}