I've a div named page with lets say 1000px width and position: relative; and in this page div I've a logo with position: absolute; and top:-20px; right: -20px. When the page width is more than 1000px the image should be displayed but when the page width is equal or lower than 1000px the overflow should be hidden (overflow: hidden;).
When I set the overflow attribute in the page div to overflow: hidden; the logo is cropped and when I choose visible I get a horizontal scroll bar when the page width is equal or lower than 1000px.
My idea to solve this issue is to use JavaScript and set the overflow attribute depending on the page width. I would prefer a CSS solution but couldn't find one. :-/
Does anyone have a suggestion how to solve this using CSS?
Thanks!
You can use CSS Media queries (http://www.w3.org/TR/css3-mediaqueries/) to change the layout based on screen size. i.e.:
#media screen and (max-width: 1000px) {
#page { overflow: hidden; }
}
#page { overflow: visible; }
The solution is really simple...
Just make a wrapper div around the page. Let's say the page div is 1000px width and the wrapper div has width: 100%. Then it's the easiest way to set overflow: hiddenfor the wrapper div and when the page size shrinks to for example 1020px a piece of the image is cropped and when the size shrinks further to 1000px the horizontal scrollbar appears because of the page div (which has the default overflow: visible).
And that's it... works in (almost) every 5 year old browser.
You should do this with CSS ( Not Javascript for browser layout issues ) - and use an #media query.
Like this, where the place you want the horizontal scroll to appear is 1200px and below.
#media screen and (min-width: 1200px) {
html {overflow-x: hidden;}
Stick that at the end of your style sheet, or in some tags in your header to test.
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;
}
}
I'm recreating a Wordpress theme myself and I'm facing a problem with the sidebar.
It's fixed and fits my 1280x720 monitor but if you see the website in a screen, for example of 800x400 the sidebar doesn't fit.
As it's fixed, the content hides when the screen is small.
I can use overflow: scroll but what I want is the div to scroll down when you use the main scrollbar as seen in the actual theme:
https://twentyfifteendemo.wordpress.com/
PS: I'm using the theme for personal uses not commercial!
EDIT: Here's my page: http://pvlts.ga/
By changing the "fixed" position of the class info to "absolute", it scrolls normally (line 16 of your stylesheet).
.info { position: absolute; }
EDIT: If you want to keep your sidebar fixed on bigger screens, you can just use media queries to target only screens that are smaller than 1100px wide, like this:
#media screen and (max-width: 1100px) { .info {position: absolute; } }
I am creating a website with a responsive layout.
I have two columns: Sidebar and Content.
The sidebar has 20% width and has a fixed position whereas the Content has 80% width with static position.
How do I stop the content from hiding under the Sidebar when the screen size is reduced?
overflow:hidden
Try adding that
you can do this with media queries
#media (max-width: 800px) {
#sidebar {
display: none;
}
}
When you make something fixed, it's taken out of the document flow. As such, the content should be hiding underneath the sidebar irrespective of whether the two columns widths are set to 20% and 80%.
You can see that here: http://jsbin.com/OQOSEZoF/3/edit (the words '80%' don't show).
So you will probably need to set padding-left: 20% on the content <div> anyway. That may solve your problem on it's own.
If however, if you have other content down the page, such as a footer that is being overlapped by the fixed div, you could use media queries to change styles depending on the screen size.
#media only screen and (max-width : 500px) {
#sidebar {
position: static;
}
#content {
padding-left: 0;
}
}
See the demo here: http://jsbin.com/OQOSEZoF/6/edit
When you resize the result to less than 500 pixels, the text in the footer becomes visible because the sidebar switches to static.
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'); }