I have some CSS that makes the whole site content have a marging to the left and right with 5em.
.content {
margin-left: 5em;
margin-right: 5em;
}
However, I want the margin to NOT work(not have a margin) or only have a margin with 1em when I enter the site on a mobile phone or touchpad. I have tried the following code but nothing happens. More specificly, I want this to be activated, and have no margin or only margin on 1em, on the screens that uses the initial scale I have set on every page. And I suppose that its only phones and pads.
#media screen
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
#media print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
#media screen,print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
You can use a media query with a specified width to achieve that :
#media (max-width: 640px){
.content {
margin-left: 1em;
margin-right: 1em;
}
}
See here common device width to choose the width you want : http://mydevice.io/devices/
Also don't forget to include the viewport meta in your <head></head> tag to make it works on your phone :
...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
The syntax that you are using for media query is incorrect.
One must specify the width at which the media query will trigger in other words the width on the screen at which the code inside the media queries that will overwrite the default code.
the syntax for the #media property is
`#media not|only *mediatype* and (*media feature*) {
CSS-Code;
}`
So you must use this code to achieve the desired results :
#media (max-width: 667px){
.content {
margin-left: 1em;
margin-right: 1em;
}
}
Related
I have a problem with width and height of images on the smartphone. I use this code. But I don't know why on the smartphone it also uses the same height of 13em like on desktop screen. All other amartphone definitions work fine.
#media only screen and (max-device-width: 60em) {
/* STYLES HERE for DEVICES with physical max-screen width of 60em */
article img {
float: left;
margin-right: 0.2em;
width: 100%;
height: auto;
}
}
article img {
float: left;
margin-right: 0.2em;
height: 13em;
}
Try putting the media query under the article img.
Not related but you don't need to repeat float and margin-right since you're not overriding them.
I've been trying to implement some media queries for a single page, basically, I want to hide and resize some elements based on the viewport dimension.
The issue I'm currently running into is that for some reason the 2nd media query does not seem to trigger.
as I understand for media queries to run I need to add the meta field (that's already done). And that they should follow a cascade order...so from max resolution to min resolution.
for some reason, only the first query is triggering and the second is not.
as I understand the "woman-image" class should be hidden when I reach a 1100px width,
and "h2.fin-text-navy2" should become yellow...It never happens...
I really appreciate the help on this.
#media all and (max-width: 1400px) {
h1.fin-text-navy {
font-size: 500%;
line-height: .9;
text-align: center;
padding-left: 0px;
padding-top: 50px;
margin-bottom: 25px;
}
.woman-image {text-align: left;}
h2.fin-text-navy2{
font-size: 250%; text-align: center;
line-height: 1.5;
padding-left: 0px;
margin-bottom: 50px;
}
.grid-container {
grid-template-columns: .8fr .5fr;
grid-auto-rows: minmax(500px, auto);
}
.buttonCenter{ width: 90%; padding: 16px; font-size: 35px; }
}//end media
#media all and (max-width: 1100px) {
.woman-image{ display: none; }
h1.fin-text-navy {
font-size: 500%;
line-height: .9;
text-align: center;
padding-left: 0px;
padding-top: 50px;
margin-bottom: 25px;
}
h2.fin-text-navy2{
font-size: 200%;
text-align: center;
line-height: 1.5;
padding-left: 0px;
margin-bottom: 50px;
color: yellow;
}
.grid-container {
grid-template-columns: .8fr 0fr;
grid-auto-rows: minmax(500px, auto);
}
.buttonCenter{ width: 90%; padding: 16px; font-size: 35px; }
}//end media
The problem seems to be one of a simple error in your CSS.
There are a couple of 'comments' end media which start with a double slash. This is not correct CSS. If those (in this case in particular the first one) are removed then the second media query works.
It can be worth putting your code through a validator - in this case I used the W3C validator and it came up with the errors clearly showing the lines they occured on.
It's also worth lookiing in the browser dev tools to see exactly what CSS is being picked up and used on an element.
Incidentally, the code worked fine without the meta field that you mentioned (at least on Edge/Chrome Windows10).
Try this
first of all as you well said you need the meta viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Then in your CSS, I recommend adding all the styles for the biggest format available without media queries, and then create a media query for each desired format:
/*All sizes and big format (desktop)*/
.woman-image {text-align: left;}
/*Tablets*/
#media (max-width:1024px){
.woman-image {text-align: right;}
}
/* Tablet Portrait */
#media (max-width:768px){
.woman-image {text-align: center;}
}
/*Mobile */
#media (max-width:640px){
.woman-image {display: none;}
}
In the previous example the element with class .woman-image will have the following behavior:
Desktop: text-align: left;
Tablet: text-align: right;
Tablet Portrait: text-align: center;
Mobile: display: none;
You should try using min-width: 1100px in your first media query and use max-width: 1100px in your second media query.
Because if you are using max-width: 1400px than it means that "If your screen size is 1400px or less, than do the following task" , that's why for your screen's every value less than 1400px you are seeing your first media query at work.
Whereas if you use min-width:1100px in the first place than, than it would mean that "If your screen size is 1100px or more, than do the following". And than you should use max-width:1100px. so in this case 1100px will be a threshold value.
#media all and (min-width: 1100px){
//...do the task for 1100px and more
}
#media all and (max-width: 1100px){
//...do the task for 1100px and less
}
I have this HTML and CSS code for a webpage. I am trying to make the website mobile-friendly and resizes itself with the size of screen viewed. I want the margins to become very small when viewed on a narrow screen like a smartphone and readjusts itself gradually when the screen is bigger and margins become larger and larger until it is a full screen of, say, a desktop computer. However, this code isn't really working. (I didn't include all the other CSS parts of this code, but please ask for it if needed!)
My attempt to resize margins due to the width of the screen:
#media (max-width: 1100px, min-width: 800px) {
body {
margin-right: 20px;
margin-left: 20px;
}
#media (max-width: 750px, min-width: 501) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
</style>
</head>
<body>
<header>
<h1>Blog</h1>
<ul> <!-- Menu Tabs -->
<li>Home</li>
<li>Art</li>
<li>Music</li>
</ul>
</header>
</body>
Thanks, I would really appreciate your help!
You are missing a closing brace around your first media query. Also, you have some extra bits in your media queries making them invalid. The way media queries work makes the min-width parts you were trying to add unnecessary. The following code, at large screens, creates a 20px left/right margin. When the threshold of 750px is hit, 5vw kicks in, and so on.
/* Invalid:
#media (max-width: 1100px, min-width: 800px)
*/
#media (max-width: 1100px) {
body {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
If your intention is to start with a default 20px right/left margin, for screens even larger than 1100px, you could create a default margin in your CSS which will be overridden by your media query rules. Then, you can begin your media queries at a narrower screen size.
/* default size */
body {
margin-left: 20px;
margin-rights: 20px;
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
https://jsfiddle.net/5vez3rdc/
I have two logos: one for small screens and one for large ones.
Rather than different resolutions of the same image, these are two very different .png files and thus I can not use a scaling function. In my attempt to use them, I created the following media queries in a .jsp page with the purpose of editing a div box in order to show the files as background-images:
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
height: 76px;
float: right;
}
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
height: 76px;
float: right;
}
}
</style>
However, this only gives me the smaller logo when the width of the window is below 1199px.
If I expand the window to 1200px or above I receive nothing.
Both images are valid because swapping their position allows me to call either one, but never both.
Can any of you tell me what is wrong with my code?
When using mobile first approach (min-width) the smaller values come first, so your code would be:
.zachery_div {
height: 76px;
float: right;
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
}
}
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Note that meta tag shouldn't be inside style tag. but inside head before style
And since you had repeated properties, I put them outside of #media as they are "standard" across the code
I have this elastic layout which works exactly as I want it in Chrome and any of the major browsers except for IE which ignores the #media query.
http://jsfiddle.net/U2W72/17/embedded/result/
* {margin: 0px; padding 0px'}
.thumb {
float: left;
width:16.8%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4%;
background: pink;
height: 200px;
}
.thumb:nth-child(5n) {
margin-right: 0px;
}
.thumb:nth-child(5n+1) {
margin-left: 0px;
}
#media (max-width: 1200px) {
.thumb, .thumb:nth-child(1n) {
width:22%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4%;
}
.thumb:nth-child(4n) {
margin-right:0;
}
.thumb:nth-child(4n+1) {
margin-left:0;
}
}
#media (max-width: 600px) {
.thumb, .thumb:nth-child(1n) {
width:48%;
}
.thumb:nth-child(2n) {
margin-right:0;
}
.thumb:nth-child(2n+1) {
margin-left:0;
}
}
#media (max-width: 400px) {
.thumb, .thumb:nth-child(1n) {
width:100%;
margin-left: 0px;
margin-right: 0px;
}
}
Problem
Although I'm fine with the elastic aspect of it not working, it is the media query which tells it not to have a margin on the left and right items, and since IE doesn't read this, it does give it a margin, which makes it too wide and drops the 5th box off the end.
Question
How can I make the 5 column layout degrade gracefully for IE without dropping the 5th item down onto the next line.
Possible solutions
Write an IE only css rule which sets the box width in IE to 16% rather than 16.8%
Make the default layout 16% and then use #media to override the width to 16.8% for compatible browsers
I'm open to any thoughts or suggestions. Thank you!
You have a syntax error in your CSS:
* {margin: 0px; padding 0px'}
This is causing all your CSS rules to be ignored. You are closing the padding with a single quote, remove that.
Also I think if you used display:inline-block; you would find a nice fluid grid layout.
Include meta tag in head..
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->