On a site I'm designing I have a header that stretches 100% of the page width and in all browsers it looks perfect but when I check mobile browsers it will only stretch about 80% of the screen while the rest of the content will go full width.
#header-bg{
height: 150px;
background-color: #33363b;
border-top: 11px solid #25272a;
width: 100%;
}
The site is http://hearthable.com and here is a image of it from an iPhone, the same thing happens on android too. You can see in the image below the dark blue background in the header and footer don't go the full width.
It is because you put width:100%; which are relative to the window size. Your site is not responsive designed, but to solve your problem fast
body{
min-width:1180px;}
setting minimum width as others suggested is not the best option, as different devices have different screen widths, and it also changes according to screen rotation.
however, adding display:inline-block; in both header-bg and footer will fix it.
EDIT:
oh yes, and width:100% in both footer and footer-inner
Related
I have been reading stack overflow for some time but this is my first post!
I have this website: https://oliv-collection.com/.
The banner on top is full width as long as the screen you view it with has a resolution of less than 1600px (the original picture width). Once the resolution is greater than that, the banner does not cover the entire width of the page.
Is there an easy way with CSS to make the width and height increase so as to cover the full width? I have been fighting with Google Inspector but can't figure out what to do!
Thanks
There might be better ways to do this, but I managed something close to what you ask for by changing the styling of the banner images to the following:
.slick-slider .nm-banner img, .nm-banner img {
display: inline-block;
width: 100%;
}
What I did was replace width: auto; to width: 100% to make the image resize correctly, and remove max-width: 100%; and height: auto;. With my change, the banner image will increase with the width of the screen even above 1600px. This works for me in Safari on macOS.
You should use
width: 100%;
Whatever the width of the screen is, the banner will be with maximum width.
Set the margin of the HTML body in CSS to 0.
body {margin: 0;}
My HTML and body width isn’t 100% when the browser window is under 400px wide. However it works perfectly over 400px wide.
I’ve tried setting body and html to padding:0 and margin: 0 and a CSS reset * and well as border-box properties from solutions posted here which haven’t worked for me.
Test website link: https://louisefindlay23.github.io/
The orange background and content should extend to the whole page exactly as it does when the browser window is over 400px wide.
Your Foundation ZURB image is too wide at that resolution. Give it (and your other images) the CSS rule of max-width: 100% to make it responsive and fit on that size screen.
E.g. img {max-width:100%;}
I have the following markup: (simplified)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
<div class="wrapper">
<div class="content"> (absolutely positioned stuff) </div>
</div>
</body>
with the following styles:
.wrapper {
width: 100%;
height: 100%;
}
.content {
width: 640px;
height: 640px;
margin: 0 auto;
position: relative;
background-color: orange;
}
On a desktop (screens larger than 640px x 640px) my square is top and center, which looks good. On mobile portrait, my square is top and fills the width, which is also good and perfectly acceptable. On mobile landscape (screens less than 640px tall), however, my square fills the entire width and the user will need to scroll to see the bottom of the square, which is not acceptable.
What I'd like to achieve is for the square to fit the height of the screen so it can be seen in its entirety in landscape view. I'm trying some media queries out now to see if that helps. Otherwise, what would be the best way to achieve this?
I've tried changing .content to height: 100%, but because most of its contents are absolutely positioned they end up having 0px height. As such, ideally the square should still be 640px x 640px in size, just scaled to fit the screen so the contents can stay put.
Thanks.
This is the ideal case for viewport units. Where 100vw is the the width of the viewport, and 100vh is the height of the viewport.
You should be able to find some more information on the different units here.
One thing to note though, is that using height related viewport units can lead to some odd effects on Mobile Safari and Mobile Chrome, because the viewport height can change on scroll. The various behaviours of Chrome and Safari on mobile with regards to this have changed over the years as they try to figure you out an ideal solution. I find if I need to rely on vh units I often use a little bit of javascript or css to then "lock" the object at that height on mobile.
You can find other tips for that issue if you run into it in this Stack Overflow Post
I have been working to get my company logo image and the background image to both resize according to the size of the screen they are viewed on. However, when I get the background image to resize properly the logo image will not change size at all. But, when I am able to get them both to resize, the logo image is then far too large and covers the width of the entire screen. Then when I change the width of the logo image to be smaller, then the background image shrinks to less than the width of the screen.
Here is the link to the landing page I am having issues with http://www.dorkdungeontestblog002.blogspot.com/
I would like the header image and logo image to produce the following effect while being responsive to different screen sizes, but as you can see by viewing the site, I am not achieving that result.
Hopeful Header and Logo Appearance
If anyone can assist me with this I would really appreciate it, I've been at it for several hours now and it's just not working. Please let me know if there is any further information I can provide as well.
This is all of the code under the Header note...
/*---------[HEADER]---------*/
#header-holder { width:100%; height:auto; float:left; color:#fff; background-image:url(https://lh3.googleusercontent.com/-dYSRZJJhqiM/VibgbmiBMeI/AAAAAAAADIU/OfLCyLyozy4/s1440-Ic42/DD%252520Landis%252520Large.png);background-repeat:no-repeat;background-size: contain;}
#logo-container img {
width: 100%;
height: auto;
background-size: contain;
}
.Page_title{font-family:'Droid Sans';font-weight:bold;font-size:27px;text-shadow:0px 2px 0px #000;width:800px;text-align:center;padding:10px;margin:17px auto 30px auto;}
.Page_content{font-family:'Droid Sans';font-size:13px;width:560px;text-align:center;margin:0 auto;padding:0 0 56px 0;line-height:22px;color:#ffbda4;text-shadow:0px 1px 0px #000}
Wrote here for the editor.
.container,
#front_page_container {
width: 100%
}
In this way the countdown remain centered. But in small resolution is too big, and i don't know if this class are used in another place of the site.
My advice is to change the layout. The template you are using is not responsive at all, so you have a lot of work to make it responsive.
I have been having a strange issue with my website http://www.restowarehouse.co.uk
When the desktop version of this site is viewed on mobile, or you recreate a mobile resolution using the developer tools on chrome, a large inexplicable space appears. How do I get rid of it?
Example: http://www.drivewayrestore.co.uk/images/Unwantedspace.png
Your #container has a width of 1299 pixels. If you visit the page with a 600 pixels width screen, it takes only the half of the page in the screen because it has 699 pixels more to the right.
Change your css to
#container { width: 100%; }
And it works.
#AlastairNixon:
You need to do two things in stylesheet
body { background-size: 100% 100%; }
#container { width: 100%;} --> As your current width is 1299px.
Just another advice: try using clearfix for parents of the element having float.