I'm designing a responsive website and after change my cellphone orientation from portrait to landscape and then to portrait the CSS stop working.
Initially the css that I apply to the the 320-480 resolution loads very well in my portrait screen and also in the landscape but when I change it back to portrait the css stop working, is like is not loading the css.
What's the problem????
When using css media queries it is unnecessary to assign a min width, you can use simply max width and have multiple queries if you want the layout to change at a different point. I can't explain why your css works initially but then changes when you turn the screen a couple times but here is some good css media query practice and syntax that could solve your problem:
#media only screen and (max-width: 320px){
/*Some css styling for widths below 320 pixels*/
}
#media only screen and (max-width: 480px){
/*Some css styling for widths below 480 pixels.
Keep in mind that this css will only be applied for viewports between 320
pixels and 480 pixels*/
}
It is not necessary to use device-width when you can simply use width. Also the 'only screen and()' is good practice for detecting mobile viewport widths in css. I hope that this helps and your problem is solved.
The css
#media all and (min-device-width: 320px) and (max-device-width: 480px){
#reviews{
display: none !important;
}
.footer {
border: 1px solid #CCCCCC !important;
}
ul,ol{
margin-left: 0px!important;
}
.bottom-menu ul{
margin-left: 25px !important;
}
#side-quote{
display: none;
}
#export-dption{
float: bottom;
}
#export-request{
float: top;
}
.panoramic-pic{
padding: 0px !important;
}
#googleMap{
display: none;
}
.quote-index{
width: 100% !important;
background: red !important;
}
}
and the cellphone is a LG Optimus F3 and the browser is chrome.
as you can see in the selector .quote-index is set the background to red, initially it loads in red when the phone is in portrait mode but when i change it to landscape an then back to portrait is like that selector doens't exits.
Related
I'm developing a photo browser with the Bootstrap framework. It has a 4:3 aspect ratio that I'm trying to make responsive. My basic approach is something like this:
#carousel {
width: 320px;
height: 240px;
...
}
and then use media queries to support larger device widths and heights so that #carousel grows, but not any larger than the device, e.g.:
#media (min-width: 576px) and (min-height: 390px) {
#carousel {
min-width: 513px;
min-height: 385px;
border: 1px solid blue; /* test attribute */
}
}
and so forth for larger devices.
This works fine overall and in the responsive testers built into Chrome and Safari. It does not work on my physical iPhone 13, however, which has a logical width/height of 390/844px. The previous media selector should fire when the phone is in landscape, but it doesn't. iPhone 13 in landscape mode doesn't fire until a much lower min-height in the media selector:
#media (min-width: 576px) and (min-height: 300px) {
#carousel {
min-width: 513px;
min-height: 385px;
border: 1px solid blue; /* test attribute */
}
}
Note that min-height in the media selector is much lower than min-height in the CSS definition. If the height actually was 300px then the carousel should not fit on the screen, but it looks just fine. Just not very efficient or sustainable.
I suspect what's going on is that Safari is subtracting the height of its address bar and tabs from the height value. In fact I'm sure of it, because I get different behavior depending on whether I have one tab open or several. If there is only one tab open (and thus no tab bar) then I can get the media selector to fire at min-height: 333px but with multiple tabs I need to lower it to min-height: 300px. Neither one is actually correct, since if the user scrolls down in the browser then Safari hides the toolbar and makes the entire device height available (something similar happens on larger devices such as iPads).
Does anyone know how to query the effective display height from iOS Safari?
I solved this—reluctantly—with a media query condition that specifically targets the iPhone 12 Pro/13 in landscape mode:
#media (min-width: 576px) and (min-height: 300px),
(device-width: 390px) and (orientation: landscape) {
#carousel {
min-width: 513px;
min-height: 385px;
}
}
This does what I want on iOS Safari. Unfortunately, it also applies to iOS Chrome, which has a different, smaller effective screen height. I haven't figured out an even remotely elegant solution to target iOS Safari without targeting iOS Chrome.
I'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the second. Please help.
I've tried changing the values of the viewports but this doesn't work. I hope this problem is obvious to someone with more experience than I, because I really don't know what to do.
#media (min-width: 500px) and (max-width: 768px) {
(ex.) #randomDiv {
background-color: blue;
width: 100px;
}
}
#media (min-width: 768px) and (max-width: 1023px) {
(ex.) #randomDiv {
background-color: red;
width: 300px;
}
}
When the viewport hits 768px it decides to mix styles, p.e. the background color changes to red, but the width doesn't change. Does anyone know what I'm doing wrong? After 768px (769px <) everything works just fine, as well as before 768px. Please help.
When using media queries to make your frontend code responsive, it is quite useful to think about the base or starting styles then use the queries to alter those styles in one direction only. What I mean is instead of using max-width and min-width in your queries, start with the non-query styling then override those rules with either min-width OR max-width but not both. This way the changes are seamless and you only need to think about the exact breakpoint location and which styles are being overridden.
In using this approach the order of the media queries in your stylesheet matter too. Notice the widest query goes first here, if I were using min-width instead it would go the other way around.
Try looking at this in "Full page" mode and change the size of your screen down from full width.
#randomDiv {
color: white;
margin: 0 auto;
padding: 20px;
/* only background-color & width will change */
background-color: purple;
width: 90%;
}
#media (max-width: 1023px) {
#randomDiv {
background-color: red;
width: 300px;
}
}
#media (max-width: 768px) {
#randomDiv {
background-color: blue;
width: 100px;
}
}
<div id="randomDiv">I am so random.</div>
i was reading here about zoom
Zoom website depending on monitor resolution?
and it seems nothing works
I want to test the browser width / browser view port and then, if it is a high number, I want to automatically have the web page zoomed to say, 110%
cross browser compatible.
how to do it?
The better approach to achieve this using responsive design.
Calculate every element in rem unit so that as you change the font-size on root element; all of your element's looks bigger/smaller on screen through desire media quires.
i.e: let suppose you have a div and h1 elements and you want to show bigger/smaller on different screen then you should follow the code:
<div>
<h1>Hello</h1>
</div>
<style>
div{
height: 25rem;
border:1px solid red;
}
h1{
font-size: 4rem;
}
#media screen and (min-width: 600px) {
html{
font-size: 16px;
}
}
#media screen and (min-width: 1200px) {
html{
font-size: 20px;
}
}
</style>
So in above code the div and h1 tag should be big or small as you change your font-size on html tag depending upon media query breakpoints.
Alright, so, I'm hoping this is an easy question, but I can't for the life of me get it working.
The situation:
I've made some changes in the Additional CSS portion of the customize feature on my Wordpress theme.
I've taught myself a few things, and I was able to edit the margins and whatnot of the footer widgets.
They look great on desktop, not so much on mobile.
From research, I've found that you can call out #media criteria, theoretically making two sets of margin settings: one for a max screen size you set for mobile, and one for desktop.
Here's what I've been able to come up with:
#text-5 .widget-title{
margin:0px 0px 10px 0px}
#text-6 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .widget-title{
margin:0px 0px 10px 0px}
#custom_html-2 .widget-title{
margin:0px 0px 10px 0px}
#text-7 .footer-row-2-widget.widget.widget_text{
width: 100px;}
#text-7 {
width: 200px;
margin:-10px 0px 5px -10px}
#text-5 {
width: 200px;
margin:-10px 0px 5px 0px}
#text-6 {
width: 300px;
margin:-10px 0px 5px -50px}
#custom_html-2 {
width: 350px;
margin:-10px 0px 5px -50px}
This seems to be working so far. (I know negative pixels is not ideal, but I can't figure out how to otherwise move the columns to where I want them.)
So, how do I call out #media in the Additional CSS? Nothing I'm finding is helping to show what needs to be done for the Additional CSS box itself, but rather for the editor files, which I don't want to touch (aka break).
Thank you!
The site in question: http://q6q.118.myftpupload.com/
You need to add the media queries to you css file. Basically they are organized for breakpoints in pixels depending of the screen size, which will apply the rules it has inside.
Here are some of the most common breakpoints (you can make your own to support as many options as your want). I hope that helps.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I am attempting to change the background-color of a div, but only when both the viewport is under a certain width and also is in portrait mode. So both width and orientation conditions must be met. Can you help please?
Below is my code so far. But it seems only to look if the viewport is in portrait mode and on that condition alone already changes color on the div. If the viewport is in portrait mode, but still above 299px, it should not change color yet. Because it needs to be below 299px and also in portrait mode to do so.
.colorchange-div {
width: 100px;
height: 100px;
background-color: orange;
}
#media only screen and (max-width: 299px) and (orientation:portrait) {
.colorchange-div {
background-color: green;
}
}
<div class="colorchange-div">
</div>
Change max-device-width: to max-width:
like this:
#media only screen and (max-width: 299px) and (orientation:portrait) {
.colorchange-div {
background-color: green;
}
}
Working resizable Fiddle
Instead of min-device-width, you need to mention max-device-width to work that condition.