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%;}
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;}
I have built a simple page and embedded a couple of Instagram posts.
https://bjoernschefzyk.co
The problem was, that in 100% of cases the Insta widgets increased the width of the container div, which introduces horizontal scrolling on mobile. I partly solved this by putting the Insta code in a div with width: 300px;, however on Chrome on Android and for some reason also the LinkedIn in-app browser on iOS, that doesn't work consistently. The problem seems to be that the Instagram widget renders wider initially, then gets resized, but at that point the container div is already wider.
Here an example of how the issue looks like:
Any ideas how I can fix this?
You are having max-width: 500px property applied to container, iframe( 540px) and content section, so it extended to reach it's max width on smaller screens. This is the matter of responsive. So change the max-with to 100% when the screen is smaller than 500px:
#media screen and ( max-width : 500px ) {
#content {
max-width: 100%
}
}
Next, the width of the '#content' element is still exceed the view width because your box-sizing property by default is content-box which mean the width is 100% + padding + border px . Change it to border-box instead, then the final CSS should be:
#media screen and ( max-width : 500px ) {
#content {
max-width: 100%;
box-sizing: border-box;
}
}
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
I need some CSS code to make my site fit the whole screen in different resolutions, however if screen goes too small, stop resizing and become scrollable. I've tried using a div covering the whole screen, and then setting width and height to 100%, with min-width set to 800px and min-height set to 600px, but its not working. Any ideas?
PS: Solution must be pure HTML/CSS, JavaScript is not possible for me now.
Try this:
http://jsfiddle.net/6CpbZ/
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
The concept is making the width or height or both 100% and then defining a min-width or min-height.
I have a web page who's content width is about 900px, but the minimum width (because the header image is larger than the 900px) is about 1200px. This means that when I view my page from a screen that is less than 1200px but larger than 900px, the web page will have a vertical scroll.
I would like for the scroll to appear only when the screen is smaller than 900px-wide.
I've tried adding an overflow-x on the body container, hoping that the body tag takes on the width of my screen. This works in all browsers except on IE7, which I would need it to work in aswell.
Is there a method that would allow this to work?
Let me know if I'm not clear in my explanations.
You might consider using an expression in IE. It's a bit slow but will help you out for older browsers. The CSS would look something like this:
div.container { min-width: 900px; overflow-x: hidden; }
* html div.container { width: expression(Math.max((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth), 900)+'px'); }