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;
}
}
Related
I am working on a React web page and I tried to see what the site looks like on mobile, so I switched to mobile view, and as you can see my element is only taking up half of the screen, so my content and my navbar and all my elements are actually only on half of the screen.
Here is my index.css
html {
padding: 0px;
margin: 0px;
overflow-y: scroll;
background-color: #ececec;
width: 100%;
}
body {
padding: 0px;
margin: 0px;
}
The table that you can see has a min-width attribute, so it can actually be seen, but its container div is also the same size as the html tag... Help!!
I noticed that the html element width is always as big as the screen of the device is, and it gets "stuck" at that point.. If I create a screen size that is 400px wide, the tag is 400px wide, and instead of wrapping all the content it's just a fixed width of 400px...
I added a min-width: 1000px to my #root and it looks okay now but my html width is still the same as my screen width which I think should not be like that
Maybe try this
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find more info about this here:
Responsive Meta Tag
Try setting the width as 100vw, not 100% and if this won't work, set min-width to 100vw, too
I made a website on my laptop, it is my first for University.
I really enjoy it, in just 3 days I gained a good amount of knowledge of HTML and CSS and made a navigation bar, and 3 simple boxes with images/information we had to do.
Little did I realise, is that the resolution will not stretch or adapt to other screens. I opened it on my PC and the monitor is 1080p, so my right text box had a wide gap in between it and the middle box. My banner at the top also was as it would be seen on my laptop, but not the width of my screen.
#banner {
background: url("../images/background.jpg") no-repeat center;
background-size:100%;
width: 1920px;
height: 200px;
min-width:700px;
max-width: 1920px;
If I make a width and height like this, will it adapt to the screen? Also, do I NEED the width and height if I include a minimum and max? An idea to make just this banner fit well would be a good answer, as I'll use the answer to edit my other elements.
I recommend using percentage with height and width (width: 100%) rather than static sizes. It will help with different screen sizes as well as changing the size of your browser.
Edit: simple demo here
HTML:
<div id="test">
<p id="par">
Hello world!
</p>
</div>
CSS:
#test{
width: 50%;
}
#par{
width: 100%;
background-color: pink;
}
If I make a width and height like this, will it adapt to the screen?
No, px units represent fixed widths. You can use percentage units to let element have x% of it's container width or height. Another option, less common also, is to use vw and vh, wich represent a percentage of the viewport's width and height respectively.
For your use case a width: 100%; height: auto will do. The image will expand to fill it's container and the height will change dynamically to allow the image to maintain it's aspect ratio.
However, a banner for a regular desktop with aspect ratio 16:9 or 16:10 will never look good in mobile. You may need to use media queries to show different images based on viewport width.
Take this as an example:
.banner {
width: 100%;
}
#media (min-width: 600px) {
.banner-mobile { display: none; }
}
#media (max-width: 599px) {
.banner-desktop { display: none; }
}
<img class='banner banner-desktop' src="https://placehold.it/600x200?text=imma_desktop_banner"/>
<img class='banner banner-mobile' src="https://placehold.it/200x200?text=imma_mobile_banner"/>
Demo
https://codepen.io/nicooga/full/pPWyJx/
Notice how resizing the window changes the banner shown.
Read
https://www.w3schools.com/cssref/css_units.asp
https://developer.mozilla.org/es/docs/CSS/Media_queries
I would set the banner width to 100%, background-size to 'cover' for the image to fill the banner area with its position centered:
#banner {
background-image: url(http://placehold.it/1200x800);
width: 100%;
height: 200px;
background-size: cover;
background-position: center center;
}
You can play with the fiddle: https://jsfiddle.net/piotku/u4zdLkyw/1/
I am doing a full responsive web site, when I am on the screen for 1280px everything is ok, but once I go to 1920px screen everything goes down.
But I do not want to set up a media query for 1920px and fix everything again, I just want that the page stays the same on 1280px and 1920px
I have this on my css (stylus)
body
font-family 'Source Sans Pro'
width 100%
padding 0 !important
margin 0 auto !important
font-weight lighter
And in the html I have the <body> element and inside I have a <main> element.
Thanks in advance
You could apply Nick's solution like this.
<div class="wrapper">
<main>
<!-- your content here -->
</main>
</div>
and use media queries to set wrapper div's width like this
#media only screen and (min-width: 1281px) {
.wrapper {
width: 1280px;
margin: 0 auto;
}
}
so that wrapper div's width will stay as 1280px even if browser window width is larger than 1280px.
.wrapper{
width:1280px;
margin:0 auto;
}
Encapsulate everything in a div that has a static width.
any help here would be great.
I'm simply trying to place a header that stretches 100% of the screen. Inside this header is another div containing text. What i have looks fine at full screen, but when i resize down the text stacks on top of each other to accommodate the percentage.
If i set the container width to pixels instead of percentage, the header doesn't stretch the full length of the window unless i specify an exact pixel amount like 1463px - this doesn't seem right because while it may be appropriate for my laptop/screen dimensions i feel like it wouldn't work on a bigger screen with a maximized window.
I just want everything in my container to be able to be positioned according to the 100% of the browser width and height, but using percentages isn't allowing me to fix the elements so they stay put during resize. I've been working with percentages mostly and am having great difficulty keeping them fixed on resize as opposed to pixel dimensions, basically because using percentages is ensuring that my content is taking up 100% of the browser window, whereas I can't be sure with this when using pixels.
html, body {
height: 100 % ;
width: 100 % ;
padding: 0;
margin: 0;
}
.container {
width: 100 % ;
height: 100 % ;
margin: 0 auto;
}
#
topbar {
height: 25px;
background - color: #000000;
width: 100%;
}
# topbartext {
font - family: times;
color: #ffffff;
font - size: 11px;
text - align: center;
padding: 5px;
}
The text is what is moving during resize - when I make the window smaller the text just stacks on top of eachother in order to still fit the screen. I don't want it to do this - i just want it to be fixed and not resize.
HTML :
<body>
<div class="container">
<div class="header">
<div id="topbar">
<div id="topbartext">$10 SHIPPING TO THE USA FOR ALL ORDERS OVER $150*++ FREE SHIPPING AND RETURNS ON AUSTRALIAN ORDERS OVER $50* ++ *FULL CONDITIONS
</div>
</div>
</div>
</div>
</body>
Percentages is best for this.
If you want the text to remain in one line you can add the following to your html and css:
html...
<div id="topbartext" class="topbartext">
css...
.topbartext {
white-space: nowrap;
}
Note that:
In css it is better practice to use a class (.topbartext) rather than the id (#topbartext).
Using this method will mean that if you make your page narrower than the text you will have a horizontal scrollbar added (not ideal). You are probably better off allowing the text to wrap in which case you will need to remove the height: 25px;.
As suggested above you could use css media queries. That will take some googling to learn.
If I'm understanding you correctly you can also use a min-width: 820px on the body. This will ensure your body never gets below a certain width it will provide a horizontal scrollbar if it gets smaller than that.
html,body {
min-width: 820px;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Demo Fiddle
Demo Fiddle Fullscreen
You can use media queries to alter the content styles based on parameters like screen size.
Here's a demo using your example that shrinks the text and allows the #topbar to expand when the screen is smaller than 800px wide (when the text starts to wrap).
For instance:
/* Normal styles that apply all the time*/
p {
font-size:1em;
}
/* Media query that applies if the display media is a screen
and the condition between the brackets is met */
#media screen and (max-width:600px) {
p {
font-size:0.6em;
}
}
You are trying to fit in a lot of text though, you may be better off allowing the surrounding div to expand by removing the fixed height:
#topbar { height:25px; };
If you want to fit all your content on a small screen, this is probably the way to go.
Have you tried using JavaScript? I am not sure what you want since you are setting the top bar container to have fixed height which means the text will be out of the container if you do not resize the height. Here is some script to force the width (or height) to full window size (I had trouble with percentage also):
function resizeTopBar() {
var width = window.innerWidth;
var height = window.innerHeight;
var target = document.getElementById("topbar");
target.style.width = width + "px";
}
window.onresize = function() {
resizeTopBar();
}
The script will not change the way it works (the text will stack on each other) since you never change the height. If you want the height to wrap, remove height: 25px; from topbar.
Screenshot:
You can try this:-
#topbartext {font-size: 1em;}
#media only screen and (min-width: 320px) and (max-width: 479px){
#topbartext{ font-size:25%;}
}
#media screen and (min-width: 480px) and (max-width: 767px){
#topbartext{font-size:50%;}
}
#media only screen and (min-width: 768px) and (max-width: 959px){
#topbartext{ font-size:50%;}
}
#media screen and (min-width: 960px){
#topbartext{ font-size:70%;}
}
#media screen and (min-width: 1280px){
#topbartext{ font-size:100%;}
}
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.