I have a class that is just numbers, so I've used the escaping methods specified by w3 which is working as desired.
However, if I wrap it in a media query, like below, it doesn't work...
#media (min-width: 1000px) {
.\33 47 {
left: -115px;
}
}
Is there a way to use CSS escaping within a media query?
It works just fine. What special character are you trying to escape?
.\26 B {
width: 50px;
height: 50px;
background-color: red;
}
#media (min-width: 500px) {
.\26 B {
background-color: blue;
}
}
<div class="&B"></div>
Number class:
.\31 3 {
width: 50px;
height: 50px;
background-color: #bada55;
}
#media (min-width: 500px) {
.\31 3 {
width: 50px;
height: 50px;
background-color: purple;
}
}
<div class="13"></div>
Note: check the snippet in full screen
Related
I would like to have 2 different margin for the same div depend on mobile and desktop view.
The code below can perform a margin-left: 70px; on desktop.
The problem arises on mobile view, it doesn't reset to margin-left: 0px;
How can I do it ?
Thanks.
.body-container {
padding-left: 0px;
padding-right: 0px;
max-width:1350px;
}
.content {
margin-left: 70px;
}
.content-collapsed {
margin-left: 0px;
}
You're not resetting margin in .content
You need to use media queries
The solution below uses non-mobile approach
body {
margin: 0;
}
.content {
background: red;
margin-left: 70px;
}
#media (max-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 0;
}
}
<div class="content">content</div>
The solution below uses mobile approach (recommended, also is the same used by bootstrap 4)
body {
margin: 0;
}
.content {
background: red;
margin-left: 0;
}
#media (min-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 70px;
}
}
<div class="content">content</div>
You can use media queries (MDN).
Example :
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin-left: 0px; /* mobile*/
}
/* screen width higher than 750px */
#media screen and (min-width: 750px) {
div {
margin-left: 70px;
}
}
<div></div>
Use media query. Add:
/* For mobile*/
#media only screen and (max-width: 768px) {
div {
margin-left: 0;
}
}
This is the solution that worked the best for my case:
<style>
.body-container {
padding-left: 0px;
padding-right: 0px;
max-width:1350px;
}
.content {
margin-left: 70px;
}
##media (max-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 0px;
min-width: 100%;
}
}
</style>
Thank you. You made my day.
I'm trying to create a layout as follows:
Desktop - no cards expanded:
Desktop - max one card expanded at a time:
Tablet and smaller - no cards expanded:
Tablet and smaller - max one card expanded at a time, spanning over two columns:
I need to do so using HTML, CSS(SCSS) and jQuery.
I have so far tried to use flex, grid and simple css columns declaration. Desktop is not problematic but I'm especially having a tough time figuring out how to span a card over two columns in tablet and smaller devices.
Flex try in CodePen: https://codepen.io/allgoodtigerwood/pen/eYJLpZq
.c-card {
width: calc(50% - 65px);
height: fit-content;
padding: 25px;
margin: 0 0 15px 15px;
#media (min-width: 1024px) {
width: calc(33.3% - 65px);
&:nth-of-type(3) {
margin-top: 100px;
}
}
&:nth-of-type(2) {
margin-top: 50px;
}
&:nth-child(3n+1) {
order: 1;
}
&:nth-child(3n+2) {
order: 2;
}
&:nth-child(3n) {
order: 3;
#media (max-width: 1023px) {
&:nth-child(odd) {
order: 1;
}
&:nth-child(even) {
order: 2;
}
}
}
&--expanded {
#media (max-width: 1023px) {
width: 100%;
}
}
&__container {
display: flex;
width: 100%;
flex-flow: column-wrap;
height: 1000px;
margin-left: -7.5px;
&:before,
&:after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
}
}
Column try in CodePen: https://codepen.io/allgoodtigerwood/pen/gOPBvWb
.c-card {
width: calc(100% - 65px);
padding: 25px;
margin: 0 0 15px 15px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
&--expanded {
#media (max-width: 1023px) {
column-span: all;
}
}
&__container {
#media (max-width: 1023px) {
columns: 2;
}
columns: 3;
}
}
Does anyone have any ideas which could direct me in the right direction?
Thank you in advance!
I have a wrapper with some divs within. My goal is to display the divs different on different viewports. On smaller viewports than 500px they should take the whole width of 100% and wrap in a column. On a viewport of min: 500px and max: 768px they should take 50% of the row and wrap again (so maximum two divs in a row). On the viewport with min: 1025px they should have a with of 1/3 of the whole row and again wrap (so maximum three divs in a row). They also have some spaces on right and bottom solved with margin.
My question: Is it possible to inherit properties on a larger media query from a lower one? If you take a look on my css, in the first media query (min: 500px and max: 768) they get the first time a margin-right of 36px. This margin-right should be the same on all wider viewports. My goal was it, just to change the width and it would take the margin-right which was set last in the css, in this case that one from the lowest media query. At the moment this isn't working. I have to repeat myself and put the same margin-right on all medie queries, than it works. Why the inherit doesn't work? He also inherits the display properites for all wrappers without setting it in every media query, why isn't he inheriting also the margin-right? Hope it's clear enough.
Here also a codepan, where you can easy resize the screen: https://codepen.io/STWebtastic/pen/zRvdEv
.wrapper {
display: flex;
flex-wrap: wrap;
align-items: strech;
border: 1px solid lightcoral;
padding: 10px;
}
.wrapper__item {
border: 3px solid black;
width: 100%;
margin-bottom: 10px;
}
.wrapper__item:last-child {
margin-bottom: 0;
}
#media (min-width: 500px) and (max-width: 768px) {
.wrapper__item {
width: 47%;
margin-right: 36px;
margin-bottom: 36px;
}
.wrapper__item:nth-child(2n) {
margin-right: 0;
}
}
#media (min-width: 769px) and (max-width: 1024px) {
.wrapper__item {
width: 48%;
}
}
#media (min-width: 1025px) {
.wrapper__item {
width: calc(100% / 3 - 24px);
}
.wrapper__item:nth-child(2n) {
margin-right: 36px;
}
.wrapper__item:nth-child(3n) {
margin-right: 0;
}
}
<div class="wrapper">
<div class="wrapper__item">Item 1</div>
<div class="wrapper__item">Item 2</div>
<div class="wrapper__item">Item 3</div>
</div>
Here is the code just fine tune the numbers to position things correctly:
.wrapper {
display: flex;
flex-wrap: wrap;
align-items: strech;
border: 1px solid lightcoral;
padding: 10px;
}
.wrapper__item {
border: 3px solid black;
width: 100%;
margin-bottom: 10px;
}
.wrapper__item:last-child {
margin-bottom: 0;
}
#media (min-width: 500px){ // Changed
.wrapper__item {
width: 40%; // Changed
margin-right: 36px;
margin-bottom: 36px;
}
// Changed
.wrapper .wrapper__item:nth-child(2) {
margin-right: 0;
} // End Change
}
#media (min-width: 769px) { // Changed
.wrapper__item {
width: 48%;
}
}
#media (min-width: 1025px) {
.wrapper__item {
width: calc(100% / 3 - 31px); // Changed
}
.wrapper__item:nth-child(2n) {
margin-right: 36px;
}
.wrapper__item:nth-child(3n) {
margin-right: 0;
}
}
Make sure to allocate enough space for each element at each viewport
As a test, I created 4 columns (with corresponding colors) with 25% width each. I floated them so that they will span the entirety of the page side by side.
I wanted to use media queries in order to cause there to only be two columns side by side if the viewport became small enough, and then one per line if the viewport was even smaller. I'm just doing this within one HTML document as I don't really care to create an accompanying CSS document.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media only screen and (max-width: 787px) {
.column1, .column2, .column3, .column4 {
width: 50%;
}
}
#media only screen and (max-width: 420px) {
.column1, .column2, .column3, .column4 {
width: 100%;
}
}
.column1, .column2, .column3, .column4 {
width: 25%;
height: 300px;
}
.column1 {
background-color: red;
float: left;
}
.column2 {
background-color: blue;
float: left;
}
.column3 {
background-color: yellow;
float: right;
}
.column4 {
background-color: black;
float: right;
color: white;
}
</style>
</head>
<body>
<div class="column1">
<p>breakfast</p>
</div>
<div class="column2">
<p>lunch</p>
</div>
<div class="column3">
<p>dinner</p>
</div>
<div class="column4">
<p>snack</p>
</div>
</body>
I feel like I am doing something incredibly wrong. Thank you in advance.
media queries should be below your css styles and not above them.
check this fiddle ~ https://jsfiddle.net/g4j4ewpp/
.column1,
.column2,
.column3,
.column4 {
width: 25%;
height: 300px;
}
.column1 {
background-color: red;
float: left;
}
.column2 {
background-color: blue;
float: left;
}
.column3 {
background-color: yellow;
float: right;
}
.column4 {
background-color: black;
float: right;
color: white;
}
#media only screen and (max-width: 787px) {
.column1,
.column2,
.column3,
.column4 {
width: 50%;
}
}
#media only screen and (max-width: 420px) {
.column1,
.column2,
.column3,
.column4 {
width: 100%;
}
}
An explanation for the answer provided by GvM -
The browser parses code top to bottom. You could have two thousand
#media only screen and (min-width: 748px){
.class {
background-color: some-color;
height: some-height;
}
}
statements. As long as they are all for the same height, the last one will take effect and all previous will be ignored.
Also, say you have three queries that set particular attributes you might want if its a medium size, and one extra if it is a large size.
#media only screen and (min-width: 320px) {
/*give a div 40px height and blue text*/
.this-div {
color: blue;
height: 40px;
background-color: lemonchiffon;
}
/*declare a div, but hide it until the screen is big enough*/
.hidden-div {
display: none;
width: 50%;
background-color: orange;
}
}
#media only screen and (min-width: 480px) {
/*style a different div to have blue text and assign it height*/
.that-div {
color: blue;
height: 30%;
background-color: magenta;
}
/*change the first div's font to red, but keep its height the same*/
.this-div {
color: red;
}
#media only screen and (min-width: 748px) {
/*change the first div's font again, and now it takes up the entire screen.*/
.this-div {
color: green;
height: 100%;
}
/*split the second div and a new third div*/
.that-div {
width: 50%;
}
.hidden-div {
display: inline;
}
}
The background colors remained the same through all media queries. But, the heights and widths may have changed depending on which query was most recently accepted - depending on the size of the viewport.
I've made a site (fairly new to html/css) and certain #media queries aren't working.
Idea being to display container1 95% of screen, on a screen less than 500px..
thanks in advance!
See code below:
#container1 {
float: left;
max-width: 45%;
min-height: 320px;
padding:20px;
margin: 1px;
border: solid #ffffff;
}
#container1:hover { border:solid #000000;
}
#container1:hover { background-color: antiquewhite;
}
#media screen and (max-width: 500px) {
#container1 {
width: 95%;
}
}
You have max-width: 45%; set on it in a previous declaration. Change to:
#media screen and (max-width: 500px) {
#container1 {
width: 95%;
max-width: none;
}
}
You have to overwrite the max-width too!
Otherwise
max-width: 45%;
is still active.