I am trying to display a 3 column layout on desktop and a single column layout on mobile using CSS Grid.
However, when I try the following a 3 column layout persists with a viewport smaller than 650px.
.page {
display: grid;
grid-template-columns: 33% 34% 33%
}
#media (max-width: 650px) {
.page {
grid-template-columns: 100%;
}
}
How do I transition between a 3 column wide layout to single column stacked layout responsively with CSS Grid?
You can use repeat() for this and just set the columns to one frame for the media query.
.page {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#media (max-width: 650px) {
.page {
grid-template-columns: 1fr;
}
}
You can add a grid-template-area property as follows:
.page {
display: grid;
grid-template-area: "a b c";
grid-template-columns: 33% 34% 33%
}
#media (max-width: 650px) {
.page {
grid-template-columns: 100%;
grid-template-area:
"a"
"b"
"c";
}
}
Where string delimiters denote new rows.
Related
I have two divs with IDs #div1 and #div2.
I want to:
show #div1 if width >= 900px OR height >= 500px
show #div2 otherwise, i.e. width < 900px OR height < 500px
How can I achieve this with media queries?
I have tried the following, but it is not working:
#media (max-width: 900px), (max-height: 500px) {
#div1 {
display: block !important;
}
#div2 {
display: none !important;
}
}
#media (min-width: 901px), (min-height: 501px) {
#div1 {
display: none !important;
}
#div2 {
display: block !important;
}
}
What am I doing wrong?
It is because it is the other way arround:
width >= 900px translate to min-width: 900px
height >= 500px translate to min-height: 500px
width < 900px translate to max-width: 899px
height < 500px translate to max-height: 499px
As mention in the comment in your case you don't need 2 media queries
#div1 {
display: none !important;
}
#div2 {
display: block !important;
}
#media (min-width: 900px), (min-height: 500px) {
#div1 {
display: block !important;
}
#div2 {
display: none !important;
}
}
#div1 {
display: block !important;
}
#div2 {
display: none !important;
}
#media (max-width: 900px), (max-height: 500px) {
#div1 {
display: none !important;
}
#div2 {
display: block !important;
}
}
You only need one inside a media query
#div1 {
display: none !important;
}
#div2 {
display: block !important;
}
#media (min-width: 900px or min-height: 500px) {
#div1 {
display: block !important;
}
#div2 {
display: none !important;
}
}
You also don't do an OR that way. see my changes above.
I was trying to style for a screen that is less than 992px and aspect ratio less than 1. Here is what I tried. It is not working. Is it possible to do something like this in CSS? Here is what I tried.
#media screen
and (max-width: 992px)
and (max-aspect-ratio: 1){
.classStyle{
display: flex;
flex-direction: column;
}
}
You can use like this
#media (aspect-ratio: 1/1) {
div {
background: red;
}
}
Also can learn more here
I think this is what you want..
#media screen and (max-width: 992px) and (aspect-ratio: 1/1){
body{
display: flex;
flex-direction: column;
}
}
.remote-local-video {
display: grid;
grid-gap: 0.25rem;
grid-template-columns: 50% 50%;
grid-template-rows: 80vh;
grid-template-areas: "remoteVideo localVideo";
.ch-video {
object-fit: contain;
}
#media (max-width: 769px) {
grid-template-columns: 100%;
grid-template-rows: 40vh 40vh;
grid-template-areas: "remoteVideo" "localVideo";
}
}
We have this CSS. It seems to be working fine in Android Chrome, Chrome/Firefox dev tools in Macbook Pro. In iPhone 12 Max Pro, iPhone 11 Pro and IPhone XR - either remoteVideo is displayed or localVideo is displayed. Both are not displayed together. I tried this both in Chrome and Safari browser.
I have found that Safari on iPhone is more particular with having perfect code than any other platform. Could it be that the closing bracket for your class .remote-local-video is at the bottom of this CSS instead of above the .ch-video class? Also (not sure if you are just using different syntax than I am used to - but I usually separate the media query and re-state the class name within). I threw this in my testing environment real quick and found it working in Safari on iPhone 6:
.remote-local-video {
display: grid;
grid-gap: 0.25rem;
grid-template-columns: 50% 50%;
grid-template-rows: 80vh;
grid-template-areas: "remoteVideo localVideo";
}
.ch-video {
object-fit: contain;
}
#media only screen and (max-width: 769px) {
.remote-local-video {
grid-template-columns: 100%;
grid-template-rows: 40vh 40vh;
grid-template-areas: "remoteVideo" "localVideo";
}
}
Note: I also used the following HTML (please pardon my inline border for visibility):
<div class="remote-local-video">
<div style="border: 1px solid black">1</div>
<div style="border: 1px solid black">2</div>
</div>
(I once found a missing closing bracket in a JavaScript selector that was working everywhere else in a web application, but stopped working/showed up when the dept. switched to using iPhones!)
.remote-local-video {
display: grid;
grid-gap: 0.25rem;
grid-template-columns: 50% 50%;
grid-template-rows: calc(100vh - 80px);
grid-template-areas: "remoteVideo localVideo";
.ch-video {
object-fit: contain;
}
#media only screen and (max-width: 950px) and (orientation: portrait) {
div#meetingLocalVideo {
height: calc(50vh - 40px);
}
div#meetingRemoteVideos {
height: calc(50vh - 40px);
}
grid-template-columns: 100%;
grid-template-rows: calc(50vh - 40px) calc(50vh - 40px);
grid-template-areas: "remoteVideo" "localVideo";
}
#media only screen and (max-width: 950px) and (orientation: landscape) {
div#meetingLocalVideo {
height: calc(100vh - 80px);
}
div#meetingRemoteVideos {
height: calc(100vh - 80px);
}
grid-template-rows: calc(100vh - 80px);
}
}
IOS expects us to set explicit height of divs. Above CSS is working fine.
I'm using Bootstrap 4 with the container at default width on my desktop screen.
I want the main content section of my app to be max 940px container on big screen.
Do I simply override the bootstrap container class, or create new class container-2? or something else?
Edit
according to the bootstrap.css you could build your own container class. These are the classes you have to 'rebuild':
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container {
min-width: 992px !important;
}
You should never override original bootsrap-classes.
To ensure that everything works well you could do something like this:
#media (min-width: 992px) {
.container.max-width-940 {
max-width: 940px !important;
}
}
#media (min-width: 1200px) {
.container.max-width-940 {
max-width: 940px !important;
}
}
.container.max-width-940 {
min-width: 940px !important;
}
and use it like: <div class="container max-width-940"></div>
Since the Bootstrap container is responsive and uses media queries to set the max-width.
The container alone is only used to define width, auto margins and padding. Other grid class (ie row, col) are not dependent on it, so it would be easiest to define your own custom container.
To define your own container-940...
.container-940 {
width: 100%;
max-width: 940px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Demo: https://www.codeply.com/go/QOAjmGLp7K
Or, if you want to use the existing .container the overrides would be...
#media (min-width: 992px) {
.container {
max-width: 940px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 940px;
}
}
Demo: https://www.codeply.com/go/QOAjmGLp7K
If you want to change the max-width to be smaller on smaller widths than you'd adjust the media queries as desired:
#media (min-width: 576px) {
.container {
max-width: ??px;
}
}
#media (min-width: 768px) {
.container {
max-width: ??px;
}
}
#media (min-width: 992px) {
.container {
max-width: 940px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 940px;
}
}
change css in bootstrap file
click on above link and replace that pointed 2 value with 940px in bootstrap.min.css file.
Maybe something very obvious but it depends which reference is first in your code: bootstrap CSS or your personal CSS file. All things equal the last reference wins.
How can I set up a 960px bootstrap grid for 12 columns but have each row be 1280px wide, so only the rows background images/colors are 1280px wide and have a padding on both sides of 160px (1280-960 / 2)?
If you are using the bootstrap framework then you would use the <div class="row"> outside of a <div class="container">
The container is the element that has the width in CSS whereas the row doesn't have a width so that would span the width of the page that you have while the content would be contained in the container.
From the bootstrap CSS :
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}