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) {
…
}
Related
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.
I am using bootstrap to implement the responsive web design. I am facing issue to apply "left" property as %. What I found is, instead of taking the % of total browser width, it takes the % of #media width define which really breaking the responsive nature of application.
.image-container {
width: 173px;
top: -69px;
left: 50%;
margin-left: -86px;
max-width: 336px;
overflow: hidden;
position: absolute;
}
#media (min-width: 660px) {
.image-container {
left: 63%;
}
}
#media (min-width: 831px) {
.image-container {
top: -91px;
left: 80%;
width: 30%;
}
}
#media (min-width: 1280px) {
.image-container {
left: 85%;
}
}
I found following
1. At >1280 width, left=1280*.85 is used
2. At > 831, left=831*.80 us used
3. At > 660, left=660*.63 is used
Following is HTML markup snippet
<div class="bottom-section">
<div class="parent-container">
<div class="image-container">
<img class="card-art" src="/img/application/cardarts/thumbnails/img.png">
</div>
</div>
</div>
Following is parent container css
.parent-container {
padding-left: 0;
width: 100%;
padding-top: 68px;
max-width: 970px;
margin: 0;
position: relative;
}
#media (min-width: 660px) {
.parent-container {
padding-top: 20px;
}
}
This is a surprising behavior for me. My understanding is, left=x% should alwasy look for parent element and apply the % of that. I am new to media query and using bootstrap to implement the responsive web design.
Here is a fiddle to play with.
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;
}
}
I have absolute positioned image (on the left) with some div's positioned relative in it. On the right side I have div positioned by float: right. Is there any way to resize image when it touches floated div? Not the edge of the browser. For now I made something like this
#media screen and (max-width: 1860px){ .content-image img { max-width: 1250px; } }
#media screen and (max-width: 1780px){ .content-image img { max-width: 1200px; } }
#media screen and (max-width: 1710px){ .content-image img { max-width: 1150px; } }
#media screen and (max-width: 1640px){ .content-image img { max-width: 1100px; } }
#media screen and (max-width: 1570px){ .content-image img { max-width: 1050px; } }
#media screen and (max-width: 1500px){ .content-image img { max-width: 1000px; } }
#media screen and (max-width: 1430px){ .content-image img { max-width: 950px; } }
#media screen and (max-width: 1360px){ .content-image img { max-width: 900px; } }
#media screen and (max-width: 1290px){ .content-image img { max-width: 850px; } }
#media screen and (max-width: 1220px){ .content-image img { max-width: 800px; } }
#media screen and (max-width: 1150px){ .content-image img { max-width: 750px; } }
#media screen and (max-width: 1080px){ .content-image img { max-width: 700px; } }
#media screen and (max-width: 1010px){ .content-image img { max-width: 650px; } }
but maybe there is more cleaner way? And maybe more simplier?
Put the image in a div. For the CSS, use the following:
#image-container {
margin-right: 20%;
position: absolute;
}
#right-div {
float: right;
width: 20%;
}
.content-image {
max-width: 100%;
}
Fiddle
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%;
}
}