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]-->
Related
I was using media query and it was working, but now it just stopped working, but if I use the developer tool of the browser the media query works well
Here is my media query code, but I dont think that that is the error
#media only screen and (max-width: 760px) and (max-device-width: 760px) {
.conainerInp {
display: block !important;
}
.contInputs,
.contInputs3 {
flex: 100% !important;
max-width: 100% !important;
margin-bottom: 10px;
width: 100%;
}
.last {
margin-bottom: 60px;
}
.contenido {
display: flex !important;
flex-wrap: wrap !important;
}
.contenedoresGen {
max-width: 100% !important;
width: 100% !important;
}
::ng-deep .mat-horizontal-content-container {
padding: 0 !important;
}
::ng-deep.mat-horizontal-stepper-content {
overflow: auto !important;
}
::ng-deep .mat-tab-label-container {
overflow-x: auto !important;
}
}
the screen was at a measure less thant the indicated in the media query
You need to add the following meta to your HTML in the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I foun out the problem, it was my conditions, it neaded that the sceen be at 760px also the devie at the same time, I already had the meta tag before asking this, the solution was removing
and (max-device-width: 760px)
and it still working on movile because of the meta tag
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 would like my Bootstrap layout to not act responsive when the width is 768px or smaller. You can view my current application HTML / CSS here, https://codepen.io/anon/pen/xXdYNa. I have had to make some changes to some of the standard Bootstrap styles so it might make things a bit more tricker.
Does anyone have any tips on how to achieve this by using CSS overrides, similar to what I have done here:
#media (min-width: 768px) {
.main {
padding-left: 250px;
padding-top: 89px;
}
}
Thanks!
How about just giving .container-fluid a min-width with 768px?
EDIT:
Adding the following worked for me:
.container-fluid {
min-width: 768px;
}
.main {
padding-left: 250px;
padding-top: 89px;
}
A min-width in combination with removing the media query which is around your .main should work.
https://codepen.io/anon/pen/EwmEXr
#media only screen and (max-width: 768px) {
.main {
padding-left: 0px;
padding-top: 0px;
}
}
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;
}
}
Last night I worked on making my site mobile optimized. When a user is on a device with less than 684px it should show the mobile nav div and hide the sidebar div. I have tested this as working on my computer (by shrinking chrome like an accordion). I also checked https://www.google.com/webmasters/tools/mobile-friendly/?url=www.kisnardonline.com to see my status, but it says my site is not mobile friendly(I realize my links together is likely valid/viewport too). I will make the links more spread once I get it working overall. Thanks for any help!
Here is my code(http://www.kisnardonline.com/wp-content/themes/mytheme/style.css):
#wrapper {
display: block;
min-width: 684px;
max-width: 1200px;
width: 98%;
margin: 0px auto; }
#media screen and (max-width: 684px) {
#wrapper {
min-width: 0px; /* show under 684px - mobile */
}
}
#content {
width: 74%;
float: right; }
#media screen and (max-width: 684px) {
#content {
width: 100%; /* show under 684px - mobile */
}
}
#mobilenav {
display: none;
margin: 15px auto;
padding: 10px 10px 10px 10px;
border-radius:20px;
border:3px solid #a1a1a1;
background:#1C2939; }
#media screen and (max-width: 684px) {
#mobilenav {
display: block; /* show under 684px - mobile */
}
}
#sidebar {
display: block;
width: 23%;
min-width: 170px;
max-width: 210px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: left; }
#media screen and (max-width: 684px) {
#sidebar {
display: none; } /* hide under 684px - mobile */
}
Here is my desktop (greater than 684px view):
Here is my desktop (less than 684px view):
Here is my mobile view(Samsung Galaxy S6):
For responsive pages you need to add a viewport tag which tells the device how to display the content:
<meta name="viewport" content="width=device-width, initial-scale=1">
For your other question, the "request desktop site" won't work the way you have it set up. That feature is for if you have 2 separate sites(one for mobile and one for desktop). For instance the mobile site would be m.kisnardonline.com and would have different files than the desktop site.