I want a webpage, with the content centered, and specify a minimum width so it resizes on small screens of smartphones, but still looks fine on PCs.
If I set the width of my div to 1024px, and margins auto, then the div stays centered when the browser window is stretched wider than that.
But obviously this requires the user to scroll sideways if they're viewing the site on a small screen.
So I tried changing width to "min-width:480px" and the div does not stay centered in a large browser window.
I've done lots of googling and the blog/forum posts for this very topic claim that all you have to do is set min-width and auto margins.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
*
{
padding:0;
margin:0;
}
#content
{
margin: 0px auto;
min-width: 480px;
background:#BBB;
height:800px;
}
</style>
</head>
<body>
<div id="content">
<span>content</span>
</div>
</body>
</html>
At this stage I'm only testing in Chrome.
That's because min-width is a constraint and not a width declaration. Auto centering using margin:0 auto only takes a width declaration to work. One suggestion would be to just define a width for your #content area and add a #media query for mobile devices with a width of 100%.
e.g.
#content { width:960px; }
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) {
#content {
width:100%;
}
}
min-width will kick in as the div is told to be smaller than the min-width value. If you set the width of the div to be width: 1024px;, then it will always be 1024px. However, if you set it to a percentage value (ie. 100%, 93.75%, etc), it will scale down, and the min-width value will kick in once 100% < min-width. So set the width of the div to be a percentage value, and you should be good to go.
Also, I'm not a huge fan of wrapping all of my content in a single, all-encompassing content div. Maybe I'm just picky, but IMHO, thats what the <body></body> element is for. And you can add margin: 0 auto; to just the Body element, and that will center the everything relative to the browser. Then the margins of the specific elements from there is up to you. Anyways, food for thought.
Yes, min-width will make your div 480px wide on small screens - it means that if the screen is smaller that 480px, your div won't fit.
The thing is, div is a block element so if you won't specify the width, it will stretch to be as wide as the parent element.
I would suggest to look into media queries
I hope it helps!
You have not specified a fixed width for your content container so by default it's going to take up the full width of it's parent.
And you can't set a min-width if you have a fixed width.
Typically, you'd have a separate CSS sheet just for mobile devices and use a media query.
Related
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 understand that this is a confusing question but I can't think of a better way to word it! Basically, I need a div element to always be 80% of the height of the page, and have the div's width always be the same width as the height (not 80% of the page width, but rather, the same length as 80% of the page's height, so that the div is square.) I've researched quite a bit and have yet to figure out a way to do this. I'm open to using JS but would prefer to use only CSS to accomplish this. Here is essentially how I want my layout to look at several different page heights/aspect ratios:
MY PAGE LAYOUT
The blue div should be 80% of the page height and should always be square.
The reason I need this is because I want the page to never have a scrollbar, so the div must be responsive to the page height, but I also want the div to be a perfect square.
Thanks!
You can use vh -> 1vh being equal to 1% of the height of the viewport's initial containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/length
So your class would be something like:
.yourClass {
height: 80vh;
width: 80vh;
}
You can declare both width and height in vh units, which represents 1% of the viewport height. In this case, that'd be
div{
width:80vh;
height:80vh;
}
That being said, it's a really bad approach. If the viewport height ever gets bigger than the width (e.g. on any mobile, or a resized window), you'll get horizontal scrollbars or hidden, overflowing content.
For such case, it'd be much better to use vmin, which is 1% of whatever the smaller viewport dimension
div{
width:80vMin;
height:80vMin;
}
Alternatively you can use media queries to detect if the viewport is at landscape (wide) or portrait (tall) mode
#media screen and (orientation: landscape) {
div{
width:80vh;
height:80vh;
}
}
#media screen and (orientation: portrait) {
div{
width:80vw;
height:80vw;
/*or whatever*/
}
}
.equalSize {
width: 80vh;
height: 80vh;
background-color: red;
}
<div class="equalSize"><div>
You can use css build in units. vh = viewport height
https://www.w3schools.com/cssref/css_units.asp
Another option would be to use aspect ratio like explained here: Aspect ratio
I'm using bootstrap and I made a nice website. At the end I wanted to center it and make some ad space on the sides, so I used this:
#wrap {
width: 1200px;
margin: 0 auto;
}
My website was fully mobile responsive, the navbar turned into a buttton and the post gradually got more stacked as opposed to being in a grid (it's sort of like a news/magazine type of thing)
How would I go about centering it while keeping it responsive, to make it look better/make ad space on the sides?
Try width 100% and height 100% instead of fixed pixels
You may want to use max-width as by using width you are stating that it is always 1200px wide (regardless of the device width).
The max-width property is used to set the maximum width of a given
element. It prevents the used value of the width property from
becoming larger than the value specified for max-width.
If you put fixed pixels, this size won't vary when the screen size shrinks. You can try adding media queries that change that fixed width. For example:
//for screens smaller than 600px, adapt the width to the full width of the screen
#media only screen and (max-width: 600px) {
#wrap {
width: 100%;
}
}
Try giving % instead of using px to width.
#wrap { width: 90%; margin: 0 auto; }
I have my subject matter here taking up 50% of the screen width, which leaves a nice margin on larger screens. However on smaller screens, this takes up valuable screen space. Is it possible to have the margin "collapse" in order to preserve the subject matters width? Or possibly give a range of acceptable widths? Basically I want the margin to shrink, prior to the subject matter shrinking.
<!doctype html>
<html>
<head>
</head>
<body style="margin-left:auto; margin-right:auto; width:50%;">
<p style="height:100%; background:#878787;">some text</p>
</body>
</html>
You could look into using CSS #media queries.
To make sure the margins shrink before the content, use a fixed pixel width for the content and margin: 0 auto.
And when the pixel width is wider than the screen, make that width smaller:
body {
width: 500px;
margin: 0 auto;
}
#media screen and (max-width: 500px) {
body {
width: 250px;
}
}
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.