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.
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
If I have a font set to a particular size for a desktop screen, can I reduce it using CSS3 #media Rule to also fit well in Mobile devices?
I have this line of code below:
<style>
#media only screen and (min-device-width: 150px) {
.log {font-size: 10px}
}
</style>
<body>
<div class="log" style="font-size: 35px;">
HEADER TEXT<br />
</div>
</body>
But it is not responsive when I open the site on my mobile device!!! What am I doing wrong???
You have set the media query wrong. It specifies font-size to devices with width higher than 150px. You should use max-width in your media query. What that does is applies the desired css to device up to that width.
For example :
#media only screen and (max-device-width: 920px) {
.log {font-size: 10px}
}
This will apply font-size: 10px to devices with width below 920px.
And using inline styles will override css from your css file or style tag. So, avoid doing that and write all your css in css file or style tag.
I hope this answers your question.
The inline styling of the element is overriding the media query. Try this instead:
.log {
font-size: 35px;
}
#media only screen and (min-device-width: 150px) {
.log {font-size: 10px}
}
<body>
<div class="log">
HEADER TEXT<br />
</div>
</body>
In CSS instead of px you can use vw (viewport width) or vh (viewport height) for font size
Open the code snippet in full page mode, and resize your browser, you will see that text size is the same according to screen size
First text will never fall in two lines, it will be smaller on smaller screen sizes
Second text will change font size when you change your browser height
Usually, the vw will do all you need
<style>
.view-width {
font-size: 5vw
}
.view-height {
font-size: 10vh
}
</style>
<div class="view-width">Some text according to screen Width</div>
<div class="view-height">Some text according to screen Height</div>
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 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 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.