This is my CSS code
article {
background-color: lightblue;
border: solid;
margin: 0;
display: grid;
height: 100%; }
footer{
background-color: darkslategray;
display: grid;
padding: 1.5rem; }
#media screen and (max-width: 600px) {
article {
display: grid;
grid-template-areas: 'sc1'
'as1'
'sc2'
'as2'
'sc3'
'..';}
footer {
display: grid;
grid-template-areas: 'nv1'
'nv2';}}
#media screen and (min-width: 600px) {
article {
display: grid;
grid-template-areas: 'sc1' 'as1'
'sc2' 'as2'
'sc3' '..';}
footer {
display: grid;
grid-template-areas: 'nv1'
'nv2';} }
#media only screen and (min-width: 768px) {
article {
display: grid;
grid-template-areas: 'sc1' 'as1'
'sc2' 'as2'
'sc3' '..';
}
footer {
display: grid;
grid-template-areas: 'nv1'
'nv2';} }
On the browser the output is showing first media query result no matter what the screen size is..
Where am I wrong??
Syntax of code seems to me right. I want to change grid-template-area according to screen size
Divide the row into two columns using grid-template-columns. As a side note, you don't need to repeat display : grid from media query to media query unless you have changed it before, you should avoid mixing min-width and max-width. Just take the max-width : 600px out of the media query and you will be fine for small screens.
article {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: 'sc1' 'as1'
'sc2' 'as2'
'sc3' '..';
}
Related
I am using a CSS grid inside of a CSS grid and I am having trouble getting two rows of three images to change into three rows of two images. It works in my browser when I resize the window, but not when I test in responsive design mode on an ipad width, even when set to landscape. I have tried using #media to set a specific breakpoint, but that doesn't seem to work either. Here is my grid and what I have tried so far:
/*Primary container*/
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3rem;
}
/*Secondary container*/
.section-grid-index {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
column-gap: 1rem;
row-gap: 2rem;
grid-area: 4 / 3 / 10 / 9;
}
#media screen and (min-width:768px) {
section > article {
display: block;
width: 45%;
}
}
#media screen and (min-width:768px) {
section > article {
grid-template-columns: 1fr 1fr;
width: 45%;
}
}
#media screen and (min-width:768px) {
section > article {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 45%;
}
}
#media screen and (min-width:768px) {
.article {
grid-template-columns: 1fr 1fr;
width: 45%;
}
}
I tried the individual media queries one at a time. The best that I can get is a single column of 6 items, each 45% of their original size. I used 45% just in case I had some issue with the box model to see if that is what was throwing things off.
I'd like to have responsive version to this code.
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"navigation-bar content content content";
margin: 0; padding: 0;
}
.navigation-bar {
grid-area: navigation-bar;
height: 100vh;
background-color: #1a1b20;
}
.content {
grid-area: content;
background-color: #202127;
}
<body>
<div class="navigation-bar"></div>
<div class="content"></div>
</body>
What I have:
#media only screen and (max-width: 600px) {
body {
}
.navigation-bar {
}
.content {
}
}
I'd like to have navigation-bar on the top of the website and content below it.
It means:
grid-template-columns should be 1fr
height of navigation-bar should be about 25vh
But I don't know, what grid-template-rows should be.
It depends on content, but if there is no content in content, it should fill whole screen (navigation-bar and content is a rest).
May you help me with responsive desige, please?
EDIT:
On mobile phone:
I would write the base styles using columnar flex and then a use grid when the screen is larger than 600px. Note that in mobile, .content uses flex-grow: 1, which means it will fill all the remaining vertical space.
.navigation-bar {
height: 15vh;
background-color: #1a1b20;
}
.content {
flex-grow: 1;
background-color: #202127;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
color: white;
}
#media only screen and (min-width: 600px) {
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"navigation-bar content content content";
}
.navigation-bar {
grid-area: navigation-bar;
height: 100vh;
}
.content {
grid-area: content;
}
}
<div class="navigation-bar">navbar</div>
<div class="content">content</div>
jsFiddle
I have a simple grid, below, which works but I've been scratching my head on how to eliminate the media queries. Am I overthinking this, or is there a more efficient way to do this without media queries?
.wrap {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: minmax(100px, auto);
}
.wrap>div {
padding: 1em;
border: solid orange 1px;
}
#media (max-width: 1000px) {
.wrap {
grid-template-columns: repeat(3, 1fr);
}
}
#media (max-width: 600px) {
.wrap {
grid-template-columns: 1fr;
}
}
There's nothing inherently wrong or inefficient with using media queries with grid. You can avoid them in certain scenarios (eg. if you have a list of the uniform cards) if you wish, by using auto-placement. The code would look somehow like that:
.listing {
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
.listing .wide {
grid-column-end: span 2;
}
This code comes from MDN article where you can learn more about this functionality and adapt it to your needs.
I made a responsive website and works perfect when I re-size the browser, but the website dont work only on smartphones, only when I add #media it dont work on mobile-browsers
My CSS:
.Footer {
background: #222;
color: #fff;
padding: 2px;
align-items: center;
text-align: center;
#media(min-width: 600px) {
.Footer {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
Use below media query. Since min-width: 600px will not detect your mobile device
#media(max-width: 600px) {
//your code
}
or
#media only screen and (max-width: 600px){
//your code
}
Or may be you have missed adding viewport you can use below one
<meta name="viewport" content="width=device-width,initial-scale=1">
Looks like you've confused min-width and max-width for the #media query.
So, try to use it this way:
#media(max-width: 600px) {
.Footer {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
I'm writing my CSS in Less and for some reason the #supports is not being displayed. Could it be a nesting issue?
#supports(display: grid) {
.two-up {
#media screen and (min-width: #small-screen) {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
}
The LESS code compiles ok.
It works in both Chrome and Firefox:
https://codepen.io/oslego/pen/KeQpgr
#small-screen: 10em;
#supports(display: grid) {
.two-up {
#media screen and (min-width: #small-screen) {
width: 500px;
height: 500px;
background-color: green;
display: grid;
grid-template-columns: 1fr 1fr;
}
}
}
<div class="two-up"></div>
Perhaps you have additional code following that rule or competing with it in an unexpected way.