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.
Related
when I made the mobile view version of the carousel image, the image broke.
how do you not break the image when responsive to mobile devices?
my Code:
#media screen and (min-width: 320px) and (max-width: 768px) {
.background {
position: relative;
flex-wrap: wrap;
}
.slideshow_container {
width: 100%;
.slideshow {
flex-direction: column;
img {
width: 33vh;
height: 33vh;
}
}
}
}
enter image description here
Take a look at the #header container at http://granthoneymoon.com/temp.html
At the browser widths of 360 to 499 the background color of the #header disappears and I have no idea why. It's basically the same css as the other widths! It works fine in dreamweaver, but when actually viewed in a browser (IE or Firefox) the problem surfaces. Any clues as to what's going on???
#media screen and (min-width: 500px) and (max-width: 954px) {
#header {
background-color: #18436C;
min-height: 10px;
overflow: hidden;
}
}
#media screen and (max-width: 499px) and (min-width: 360) {
#header {
background-color: #18436C;
width: 100%;
min-height: 10px;
overflow: hidden;
}
}
#media screen and (max-width: 359px) {
#header {
background-color: #18436C;
width: 100%;
max-width: 360px;
min-height: 10px;
overflow: hidden;
}
}
You're missing the unit for min-width:
#media screen and (max-width: 499px) and (min-width: 360) {
should be:
#media screen and (max-width: 499px) and (min-width: 360px) {
Btw. why don't you separate the common values and avoid so much repetition?
#header {
background-color: #18436C;
min-height: 10px;
overflow: hidden;
}
#media screen and (min-width: 500px) and (max-width: 954px) {
}
#media screen and (max-width: 499px) and (min-width: 360px) {
#header {
width: 100%;
}
}
#media screen and (max-width: 359px) {
#header {
width: 100%;
max-width: 360px;
}
}
My media query for portrait orientation doesn't seem to work. Any ideas what I'm doing wrong, please?
html:
<div class="titleCard" id="first" style="background-color:white"></div>
css:
html, body { -webkit-backface-visibility:hidden;}
#first {
background-color: #000;
width: 100%; max-width: 1920px;
height: 100%; max-height: 1080px;
background: url('images/bg.png') no-repeat center;
background-size:cover;
position:relative;
}
.bgwidth { width: 100%; max-width: 1920px; }
.bgheight { height: 100%; max-height: 1080px; }
#media all and (orientation:portrait) {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
It works (simplified test). It's just that you're not telling it for what element it should change the background when the orientation changes.
You probably meant to have something like:
#media all and (orientation: portrait) {
#first {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
}
instead of:
#media all and (orientation:portrait) {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
I try to use #media to check height of browser if it less than 600px
I want to set a new max-width and height so what did I do wrong?
or any missing syntax ?? Please advice and help , Thank!
I also have other #media which is work but for height not.
#media only screen and (min-height: 600px){
#book-container{
max-width: 748px;
max-height: 469px;
}
}
#media only screen and (max-width: 500px){
#txt-search{
visibility: hidden;
}
}
#book-container{
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
width: 80%;
max-width: 830px;
max-height: 520px;
/*max-width: 748px;*/
/*max-height: 469px;*/
}
#media only screen and (min-height: 600px) applies for screen widths of over 600 pixels. Generally, you want max-*:
#media only screen and (max-height: 600px) {
…
}
Normal CSS:
.container-step1 {
text-align: center;
margin: 0 auto;
padding-top: 12%;
width: 50em !important;/*60em*/
height: 35em;
}
For mobile I want to update padding-top:25%;. I tried:
#media only screen and (max-device-width: 480px) {
.container-step1 {
text-align: center;
margin: 0 auto;
padding-top: 25%;
width: 50em !important;/*60em*/
height: 35em;
}
}
It didn't work. Safari is still referring to normal css.
max-device-width VS max-width. max-width will work on desktop & mobile and max-device-width will only work on mobile.
Also, you only need to add the css that is updated in the query. You could remove all the redundant css.
.container-step1 {
text-align: center;
margin: 0 auto;
padding-top: 12%;
width: 50em !important;/*60em*/
height: 35em;
}
#media only screen and (max-device-width: 480px) {
.container-step1 {
padding-top: 25%;
}
}