Hello guys I am using the following code to show and hide some elements but it seems to doesn't work on mobile devices.
#media screen and (max-width: 768px) and (orientation : portrait) {
.drawer1 {
display: block;
top: 789px;
}
.drawer {
display: none;
}
.drawer1-content {
background: #fff;
background-repeat: no-repeat;
border-collapse: collapse;
height: 645px;
width: 100%;
}
}
#media screen and (min-width: 769px) {
.drawer {
bottom: 0px;
height: 700px;
overflow: hidden;
position: absolute;
width: 1024px;
z-index: 5;
}
.drawer1 {
display: block;
}
..from the code you posted, looks like you miss a } at the end..
Also check if your device has a width less than 768px in the first case
and it has a width more than 769px in the second case (landscape or portrait)
try one of the several extensions available on Chrome/Firefox/Opera to set the max width of the viewport and simulate a mobile device..
From the comment:
so from the specs: IPAD 3gen: 2048-by-1536 pixel....here you have your answer :D just change the max-width and min-width ..or just use the landscape and portrait attributes
Related
I have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.
CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here
I've been trying to enlarge the logo of our site when viewed on mobile phone but no code seems to work. I've tried different versions of this but to no avail:
#media (max-width: 360px) {
.header-logo img {
max-width: 50%;
max-height: 50%;
}
}
I'm not sure what to adjust further since Firebug seems to be displaying code for the desktop version. And I don't really want to change anything on desktop view. Just mobile.
Will appreciate any feedback.
You can make the below changes in the css.
.header-logo img {
max-width: 100%;
max-height: auto;
}
Try this out
.header-logo img {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
At max-width of 360px change style property for class .custom-logo-link as below,
#media screen and (max-width : 360px){
.custom-logo-link {
width: 50%;
}
}
You have to specify only width, it will adjust height automatically.
.header-logo img {
width: 100%;
}
This may be a silly question, but are you sure max-width and max-height is what you want to change here? Those parameters just set the upper limit of how tall and wide the element can be.
https://www.w3schools.com/CSSref/pr_dim_max-width.asp
Perhaps try one of these?
#media (max-width: 360px) {
.header-logo img {
width: 50%;
height: 50%;
}
}
or:
#media (max-width: 360px) {
.header-logo img {
transform: scale(0.5);
}
}
I have a md-toolbar from Angular material 2 which is fixed on the page
<md-toolbar id="floating-toolbar" color="primary"></md-toolbar>
<md-progress-bar *ngIf="true" class="floating-progress" mode="indeterminate" color="accent"></md-progress-bar
#floating-toolbar {
position: fixed;
z-index: 1001;
}
I want to put a progress bar underneath that fixed tool-bar. What I am finding that AngularMaterial2's md-toolbar height changes based on the screen width. So I have painfully worked out the following by looking at the view port
#media (max-width: 599px){
.floating-progress {
position: fixed;
margin-top: 56px;
z-index: 1002;
}
}
#media (min-width: 600px) and (max-width: 650px){
.floating-progress {
position: fixed;
margin-top: 64px;
z-index: 1002;
}
}
#media (min-width: 651px) and (max-width: 959px){
.floating-progress {
position: fixed;
margin-top: 48px;
z-index: 1002;
}
}
#media (min-width: 960px) {
.floating-progress {
position: fixed;
margin-top: 64px;
z-index: 1002;
}
}
This seems to work ONLY when the height of the page is full screen on my desktop though. As soon as I reduce the height (Simulating a smaller screen or screen in portrait, these rule are no longer valid as the tool bar's height seems to be a variable of the both width AND height.
Is there a way to easily fix this such as simply snapping the progress bar below that fixed position tool bar.
I have found this in the md-toolbar's scss file which may help?
//toolbar.scss
$md-xsmall: 'max-width: 600px';
$md-small: 'max-width: 960px';
$md-toolbar-height-desktop: 64px !default;
$md-toolbar-height-mobile-portrait: 56px !default;
$md-toolbar-height-mobile-landscape: 48px !default;
$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;
#mixin md-toolbar-height($height) {
md-toolbar {
min-height: $height;
}
md-toolbar-row {
height: $height;
}
}
md-toolbar {
display: flex;
box-sizing: border-box;
width: 100%;
// Font Styling
font-size: $md-toolbar-font-size;
font-weight: 400;
font-family: $md-font-family;
padding: 0 $md-toolbar-padding;
flex-direction: column;
md-toolbar-row {
display: flex;
box-sizing: border-box;
width: 100%;
// Flexbox Vertical Alignment
flex-direction: row;
align-items: center;
}
}
// Set the default height for the toolbar.
#include md-toolbar-height($md-toolbar-height-desktop);
// Specific height for mobile devices in portrait mode.
#media ($md-xsmall) and (orientation: portrait) {
#include md-toolbar-height($md-toolbar-height-mobile-portrait);
}
// Specific height for mobile devices in landscape mode.
#media ($md-small) and (orientation: landscape) {
#include md-toolbar-height($md-toolbar-height-mobile-landscape);
}
/*toolbar.css*/
md-toolbar,md-toolbar md-toolbar-row {
display:flex;
box-sizing:border-box;
width:100%
}
md-toolbar{
font-size:20px;
font-weight:400;font-family:
Roboto,"Helvetica Neue",sans-serif;
padding:0 16px;
flex-direction:column;
min-height:64px
}
md-toolbar md-toolbar-row{
flex-direction:row;
align-items:center
}
md-toolbar-row{
height:64px
}
#media (max-width:600px) and (orientation:portrait){
md-toolbar{
min-height:56px
}
md-toolbar-row{
height:56px
}
}
#media (max-width:960px) and (orientation:landscape){
md-toolbar{
min-height:48px
}
md-toolbar-row{
height:48px
}
}
I have solved this by putting the md-toolbar and md-progress bar inside a floating-header-div class as one unit. That way progress bar is always below the toolbar regardless of the size
<!--floating header-->
<div class="floating-header-div">
<md-toolbar>
<button md-icon-button class="ml-xs toolbar-button" (click)="sidenav.toggle()">
<md-icon id="menu-icon">menu</md-icon>
</button>
<span id="app-title">MyApp</span>
</md-toolbar>
<md-progress-bar *ngIf="isLoading" mode="indeterminate" color="accent"></md-progress-bar>
</div>
/*------------------------------*/
/*tool bar*/
/*------------------------------*/
.floating-header-div {
position: fixed;
z-index: 999;
width: 100%;
}
When I am using
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 80%;
Height: 80%;
}
}
The code does not work and defaults to original styling however the code works for
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%;
Height: 50%;
}
}
all the way up to 1024px and then breaks
anyone have any idea why this is happening?
Your max-width: 1024px query must be placed before the max-width: 425px query in the code, otherwise, as an expected result of CSS specificity, overriding will occur.
Demo of wrong order:
#imgWrapper {
border: 1px dashed red;
padding: 10px;
position: relative; }
#imgWrapper::after { content:"Default - Desktop/Large Screen"; }
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%; }
#imgWrapper::after { content:"Max-425"; }
}
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 75%; }
#imgWrapper::after { content:"Max-1024"; }
}
<div id="imgWrapper">Media Query: </div>
Proper order:
#imgWrapper {
border: 1px dashed red;
padding: 10px;
position: relative; }
#imgWrapper::after { content:"Default - Desktop/Large Screen"; }
#media only screen and (max-width: 1024px) {
#imgWrapper {
position: relative;
width: 75%; }
#imgWrapper::after { content:"Max-1024"; }
}
#media only screen and (max-width: 425px) {
#imgWrapper {
position: relative;
width: 50%; }
#imgWrapper::after { content:"Max-425"; }
}
<div id="imgWrapper">Media Query: </div>
jsFiddle: https://jsfiddle.net/azizn/d5bto8vL/
To conclude, media queries that are based on desktop-first model (max-width queries) should start with default styling for large screens then adding queries for lesser sizes, like so:
large/default > 1024 > 768 > 425 etc
Whereas in a mobile-first model, you use min-width queries and the default styling is smallest then add bigger screens:
small > 425 > 768 > 1024 etc
My query was about my wordpress site womensfertility n hormones. c o m
if I view the site on a smaller screen with resolution like 1024 x 768
the site would look like this:
but if I view it on my normal computer screen with big resolution it looks good,
then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:
.banner .logo img{width:200px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 100%;
}
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 75%;
}
I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?
use CSS Media Queries
#media (max-width: 600px) {
/*code for screen with max with 600px*/
}
#media (max-width: 480px) {
/*code for screen with max with 480px*/
}
or:
body { color: white; background: gray; font-size: .5in }
#media screen and (min-width: 1024px){
body { background: red; }
}
#media screen and (min-width: 641px) and (max-width: 1023px){
body { background: yellow; }
}
#media screen and (max-width: 640px){
body { background: green; }
}
for example :
#media (max-width: 480px) {
.banner .logo img{width:140px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 80%;
}
.container {
width: 35%;
}
}