CSS responsive grid go from 4 columns to 2
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
This is a nicely centered grid, but I want the 4 columns to go down to 2 for mobile. What should I add?
body {
display: grid;
align-items: center;
justify-items: center;
background: grey;
max-width: 56em;
}
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 3em;
margin: 0 auto;
max-width: 64em;
}
li {
display: grid;
align-items: center;
justify-content: center;
list-style: none;
}
css responsive
asked Nov 16 '18 at 20:53
NikkiNikki
62
add a comment |
This is a nicely centered grid, but I want the 4 columns to go down to 2 for mobile. What should I add?
body {
display: grid;
align-items: center;
justify-items: center;
background: grey;
max-width: 56em;
}
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 3em;
margin: 0 auto;
max-width: 64em;
}
li {
display: grid;
align-items: center;
justify-content: center;
list-style: none;
}
css responsive
asked Nov 16 '18 at 20:53
NikkiNikki
62
add a comment |
This is a nicely centered grid, but I want the 4 columns to go down to 2 for mobile. What should I add?
body {
display: grid;
align-items: center;
justify-items: center;
background: grey;
max-width: 56em;
}
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 3em;
margin: 0 auto;
max-width: 64em;
}
li {
display: grid;
align-items: center;
justify-content: center;
list-style: none;
}
css responsive
asked Nov 16 '18 at 20:53
NikkiNikki
62
This is a nicely centered grid, but I want the 4 columns to go down to 2 for mobile. What should I add?
body {
display: grid;
align-items: center;
justify-items: center;
background: grey;
max-width: 56em;
}
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 3em;
margin: 0 auto;
max-width: 64em;
}
li {
display: grid;
align-items: center;
justify-content: center;
list-style: none;
}
css responsive
css responsive
asked Nov 16 '18 at 20:53
NikkiNikki
62
asked Nov 16 '18 at 20:53
NikkiNikki
62
asked Nov 16 '18 at 20:53
NikkiNikki
62
asked Nov 16 '18 at 20:53
NikkiNikki
62
asked Nov 16 '18 at 20:53
NikkiNikki
62
62
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You have to add changes of css when the screen is narrow. Using:
@media screen and (max-width: ???px){}
And in the block you add rules like in normal css which should change when width of screen is less than given value. I suppose it will be enough for you to deal with this. If you need more information (e.g. new values) write comments and I will try to answer them.
Examples
answered Nov 16 '18 at 21:01
Tomek PiechockiTomek Piechocki
1614
Hey Tomek - I thought with css grid you did not need media queries? Well I will try it anyway
– Nikki
Nov 16 '18 at 21:09
In order to change grid values when screen is narrow you have to change this inside media queries. Like here w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints . Here is grid of columns and when screen is below given width, all columns are defined to 100% width.
– Tomek Piechocki
Nov 16 '18 at 21:13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345225%2fcss-responsive-grid-go-from-4-columns-to-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You have to add changes of css when the screen is narrow. Using:
@media screen and (max-width: ???px){}
And in the block you add rules like in normal css which should change when width of screen is less than given value. I suppose it will be enough for you to deal with this. If you need more information (e.g. new values) write comments and I will try to answer them.
Examples
answered Nov 16 '18 at 21:01
Tomek PiechockiTomek Piechocki
1614
Hey Tomek - I thought with css grid you did not need media queries? Well I will try it anyway
– Nikki
Nov 16 '18 at 21:09
In order to change grid values when screen is narrow you have to change this inside media queries. Like here w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints . Here is grid of columns and when screen is below given width, all columns are defined to 100% width.
– Tomek Piechocki
Nov 16 '18 at 21:13
add a comment |
You have to add changes of css when the screen is narrow. Using:
@media screen and (max-width: ???px){}
And in the block you add rules like in normal css which should change when width of screen is less than given value. I suppose it will be enough for you to deal with this. If you need more information (e.g. new values) write comments and I will try to answer them.
Examples
answered Nov 16 '18 at 21:01
Tomek PiechockiTomek Piechocki
1614
Hey Tomek - I thought with css grid you did not need media queries? Well I will try it anyway
– Nikki
Nov 16 '18 at 21:09
In order to change grid values when screen is narrow you have to change this inside media queries. Like here w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints . Here is grid of columns and when screen is below given width, all columns are defined to 100% width.
– Tomek Piechocki
Nov 16 '18 at 21:13
add a comment |
You have to add changes of css when the screen is narrow. Using:
@media screen and (max-width: ???px){}
And in the block you add rules like in normal css which should change when width of screen is less than given value. I suppose it will be enough for you to deal with this. If you need more information (e.g. new values) write comments and I will try to answer them.
Examples
answered Nov 16 '18 at 21:01
Tomek PiechockiTomek Piechocki
1614
You have to add changes of css when the screen is narrow. Using:
@media screen and (max-width: ???px){}
And in the block you add rules like in normal css which should change when width of screen is less than given value. I suppose it will be enough for you to deal with this. If you need more information (e.g. new values) write comments and I will try to answer them.
Examples
answered Nov 16 '18 at 21:01
Tomek PiechockiTomek Piechocki
1614
answered Nov 16 '18 at 21:01
Tomek PiechockiTomek Piechocki
1614
answered Nov 16 '18 at 21:01
Tomek PiechockiTomek Piechocki
1614
answered Nov 16 '18 at 21:01
Tomek PiechockiTomek Piechocki
1614
1614
Hey Tomek - I thought with css grid you did not need media queries? Well I will try it anyway
– Nikki
Nov 16 '18 at 21:09
In order to change grid values when screen is narrow you have to change this inside media queries. Like here w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints . Here is grid of columns and when screen is below given width, all columns are defined to 100% width.
– Tomek Piechocki
Nov 16 '18 at 21:13
add a comment |
Hey Tomek - I thought with css grid you did not need media queries? Well I will try it anyway
– Nikki
Nov 16 '18 at 21:09
In order to change grid values when screen is narrow you have to change this inside media queries. Like here w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints . Here is grid of columns and when screen is below given width, all columns are defined to 100% width.
– Tomek Piechocki
Nov 16 '18 at 21:13
Hey Tomek - I thought with css grid you did not need media queries? Well I will try it anyway
– Nikki
Nov 16 '18 at 21:09
Hey Tomek - I thought with css grid you did not need media queries? Well I will try it anyway
– Nikki
Nov 16 '18 at 21:09
In order to change grid values when screen is narrow you have to change this inside media queries. Like here w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints . Here is grid of columns and when screen is below given width, all columns are defined to 100% width.
– Tomek Piechocki
Nov 16 '18 at 21:13
In order to change grid values when screen is narrow you have to change this inside media queries. Like here w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints . Here is grid of columns and when screen is below given width, all columns are defined to 100% width.
– Tomek Piechocki
Nov 16 '18 at 21:13
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345225%2fcss-responsive-grid-go-from-4-columns-to-2%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
