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%;
}
}
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 created a grid with different sized images with the following code in CSS:
.wrapper{
width: 100%;
margin: 0px auto;
display: inline-block;
text-align:center;
padding: 25px 40px;
max-height: 190px;
margin: 0px auto;
min-height: 200px;
}
.table-center{
padding-top: 15px;
}
/* Image Classes*/
.image-box{
max-width: 250px;
max-height: 150px;
/*float: left;*/
display: inline-block;
padding: 0px 40px 30px 40px;
}
My images when I resize the window to roughly 1200px
I put all my images of varying sizes into image box and everything works pretty well until I resize the browser. Can anyone offer a better solution? One will be responsive in every size?
You need to use #media queries. Learn about them here.
Basically, you set different sizes for different screen resolution breakpoints:
#media (max-width: 600px) {
.image-box{
max-width: 150px;
max-height: 50px;
}
}
#media (max-width: 1000px) {
.image-box{
max-width: 250px;
max-height: 150px;
}
}
etc...
A full jsfiddle or codepen example would be more helpful but I can say:
Try using flexbox instead:
.image-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info
For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this?
HTML
<div class="headDiv">
<div class="headPhone">
<p class="fa fa-phone fa-xlg">000000</p>
</div>
</div><!--headDiv-->
CSS
.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}
#media (max-width: 768px) {
.headDiv .headPhone {float:none; margin: 0 auto;}
}
You could use display:table so the div will shrink to fit the content automatically.
http://jsfiddle.net/Lb7ky6vL/
#media (max-width: 768px) {
.headDiv .headPhone {
float: none;
display: table;
margin: 0 auto;
}
}
The float right was your issue and it sort of overrides the properties of display: block;. I answered this under the impression that you wanted the div to be full width. I added some color for checking.
.headDiv {
display: block;
max-width: 100%;
background: yellow;
}
.headPhone {
float: right;
background: red;
}
#media (max-width: 768px) {
.headDiv .headPhone {
width: auto;
float: none;
margin: 0 auto;
}
}
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) {
…
}