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;
}
}
Related
I'm trying to specify specific display tag according to width of the page. Typically, it is of flex but less than 437px I want to specify the property as grid.
Css,
.test {
display: flex;
justify-content: flex-end;
margin-right: 1%;
}
#media all /*and (min-width:960px) and*/ (max-width: 437px) {
/* put your css styles in here */
.test {
display: grid;
}
}
you removed a little to much with your commenting. The "and" is missing.
it has to be:
.test {
display: flex;
justify-content: flex-end;
margin-right: 1%;
}
#media all /*and (min-width:960px) */ and (max-width: 437px) {
/* put your css styles in here */
.test {
display: grid;
}
}
<div class="test">test</div>
Hello everyone
I'm using a 'main' media query to target all major changes form desktop to mobile with this (scss) :
// media breakpoint variables
$mob-exslim: 320px;
$mob-slim: 360px;
$mob-regular: 375px;
$mob-medium: 390px;
$mob-plus: 414px;
$mob-large: 428px;
#media screen and (min-width: $mob-exslim) and (max-width: 1020px) {
.contact-indicator {
display: none;
}
.hero-wrap {
margin-top: 70px;
overflow-x: hidden;
// disable left side of the hero
.left-side {
display: none;
.main-img {
display: none;
}
.hero-arrow {
display: none;
}
}
// disable the right side of the hero
.right-side {
display: none;
.main-heading {
display: none;
}
.hero-descrip {
display: none;
}
.button-wrap {
display: none;
.hero-btn {
display: none;
}
.btn-arrow {
display: none;
}
}
}
.mobile-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.flex-left {
min-width: 100vw;
width: 100vw;
max-width: 100vw;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.mobile-h2 {
position: absolute;
right: 19px;
font-size: 33px;
font-weight: 300;
text-align: right;
max-width: 298px;
width: 298px;
min-width: 298px;
margin: 8px 0 0 0;
padding: 0;
}
.mobile-hero-img {
max-width: 355px;
margin-right: -140px;
}
}
.mobile-hero-p {
margin-left: -45px;
font-size: 15.5px;
margin-top: 55px;
max-width: 272px;
line-height: 26px;
}
.mobile-hero-btn {
margin-top: 45px;
min-width: 191px;
max-width: 191px;
min-height: 53px;
height: 53px;
max-height: 53px;
border-radius: 14.5px;
background-color: $grid-black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
}
}
And then, when I'm trying to be more specific with the viewports like this:
// 375PX WIDTH & 667PX HEIGHT -- iPHONE 6,7,8
#media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (min-height: 667px) and (max-height: 667px) {
.hero-wrap {
margin-top: 65px;
}
.mobile-title {
.mobile-hero-p {
margin-top: 40px;
}
}
}
// 375PX WIDTH & 812PX HEIGHT -- iPHONE X, XS, 11 PRO
#media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (max-height: 812px) {
.mobile-title {
.mobile-hero-p {
margin-top: 70px;
}
}
}
The last two media queries don't seem to get registered.
If it helps, all the code is available on github : https://github.com/DesignedByNino/gridbase-studio in the 'src' folder under 'css/index.scss'.
This project uses vue.js - but it's not exactly relevant to the question, just so you know if you take a look.
Thank you in advance for all the answers!
As mdn says:
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width, which is the width of the screen in CSS pixels at a
scale of 100%. (There are corresponding height and device-height
values, which may be useful for pages with elements that change size
or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.
and then you can use your media queries:
#media (min-height: 768px) and (max-height: 768px)
and (min-width: 1366px) and (max-width: 1366px) {
}
UPDATE:
I've created a simplified sample:
#media screen and (min-width: 320px) and (max-width: 1020px)
and (min-height: 813px)
{
.mobile-title {
background-color: lightgreen;
}
}
#media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 0px) and (max-height: 667px) {
.mobile-title {
background-color: lightpink;
}
}
#media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 668px) and (max-height: 812px) {
.mobile-title {
background-color: lightgoldenrodyellow;
}
}
<div class="mobile-title">
A title
</div>
After some time in Chrome Dev Tools, I found out that the styles I was trying to target with the device specific media queries were not registering because I was not specific enough in SCSS with the last media queries.
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' '..';
}
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'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.