I have the following media queries... The Landscape media query is always taking precedence. I tried changing the order of these thinking that if the Portrait one was first it would take precedence, but that did not work. In fact, even when I remove the Landscape media query completely and just leave the Portrait it doesn't work, so it seems like the Portrait media query is broken somehow :S
Here are my two queries:
/* iPad Retina, landscape */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#container {
width: 995px !important;
}
#currentroom_convo {
-webkit-overflow-scrolling: touch;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.slimScrollBar .ui-draggable {
opacity: 0 !important;
}
}
/* iPad Retina, portrait*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
#container {
width: 300px !important;
}
#currentroom_convo {
-webkit-overflow-scrolling: touch;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.slimScrollBar .ui-draggable {
opacity: 0 !important;
}
div .topbar {
max-width: 300px !important;
}
}
I have this meta tag in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui, user-scalable=no">
Please note I am using the !important as I need to override some other CSS from a third-party plugin. Removing !important in the landscape query results in no change to the #container element (still doesn't even pick up the Portrait query).
I have tried searching around here but none of the answers seemed to work for me. Thanks :)
Your approch is wrong. Please note that when you change device orientation forn landscape to portait, your width become height & height become width. In your code your are not changing those values accordingly. Thus as per your condition portait styles apply when screen width is between 786px to 1024px. I think this condition is not satisfied cause ipad resotution width in portait mode is 786px at standard. Thus your styles never get applied.
Also don't use max-device-width & min-device-width & max-device-width instead use min-width & max-width. The resone behind this is that max-device-width gives you width of entire screen, but max-width giv you actual width of browser viewport.
Keeping all this things in mind change your code to following:
/* iPad Retina, landscape*/
#media only screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){
/* Styles */
}
/* iPad Retina, portrait*/
#media only screen and (max-width:768px) and (orientation:portrait){
/* Styles */
}
Related
/*iphone 6/7/8 plus*/
#media screen
and (min-width : 414px)
and (max-width : 736px)
and (-webkit-device-pixel-ratio : 3)
and (orientation: portrait)
{
#x-section-1 {
margin-top: 274px!important;
}
}
/*iphone x*/
#media screen
and (min-width : 375px)
and (max-width : 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
{
#x-section-1 {
margin-top: 237px!important;
}
}
The above is my media query.
Using google dev tools for responsive testing. When I used iPhone X to test, it displayed correctly with the margin-top is 237px!important.
But when I used iPhone 6/7/8 plus to test, the margin-top value was still reference to iPhone X's margin-top value.
How can I fix it?
This is because your second media query also matches old iPhones. It says that it is applied whenever screen width it between 375px & 812px, and 414 to 736px are in this range also.
To adapt for the iPhone notch you shouldn't use these media queries and instead use some special CSS for this case, as advised by Webkit developers in their article.
Your code will look something like this:
#x-section-1 {
margin-top: 274px!important;
}
#supports(padding: max(0px)) {
#x-section-1 {
margin-top: max(237px, env(safe-area-inset-top)) !important;
}
}
And you also need to have viewport-fit=cover in your viewport meta tag for that to work.
Make sure you have the viewport meta tag in your HTML head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then instead of using max-width / min-width, trying using device-width :
UPDATED CODE:
/* iphone X */
#media only screen and (min-width: 812px) { }
/* iphone 6+, 6s+, 7+, 8+ */
#media only screen and (min-width: 736px) { }
I am implementing a HTML application based on responsive design.
I am using "#media only screen" for responsive styling.
I am using the below Css Code for mobile orientation(Landscape/Portrait):
#media only screen and (max-device-width: 465px), screen and (max-width: 465px)
.align {
width: 33.33%;
}
#media only screen and (max-device-width: 736px), screen and (max-width: 736px)
.align {
width: 25%;
}
The first one is for vertical and second one is for landscape styles.
The issue is when I changing the browser orientation form Portrait to landscape, the Portrait style is not removed in css both styles are in enabled state but if I reduce the browser size the vertical style is removed and the landscape style is taking the responsibility.
So How do I remove the unwanted style from my page without changing the browser window size.
You can provide some additional condition with orientation
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
We can also define the css without orientation I think, by defining the media width is enough for styling
#media (max-width: 465px){
//Do your styling here
}
#media (max-width: 1024px){
//Do your styling here
}
This will help u style the css not only for mobile portrait and lanscape but also for device that are in screen size.
I want to change a webpage design if device screen width is greater than 1024px for this I using #media only screen and (min-width: > 1024px){ } but it is not working .
Please tell me what is the solution .
Instead of using Demo
#meida only screen and (min-width: > 1024px){...}
use this
#media screen and (min-width:1024px) {...}
/* styles for browsers larger than 1024px; */
#media screen and (max-width:1024px) {...}
/* styles for browsers less than 1024px; */
}
The current code that you have tried to implement will do the trick, but only if you rectify the syntax errors in it.
So, instead of
#media only screen and (min-width: > 1024px){ }
you could do
#media only screen and (min-width: 1024px){
/* css rules here will apply only if the size of the screen is greater than AND equal to 1024px */
}
Note: #media query values specified for the min-width|max-width will be inclusive of the value itself as well. Meaning that if you want that a particular style apply to an element exactly when the width of the screen is greater than 1024px (and not equal to it), you should change the value to min-width: 1025px.
ISSUE SUMMARY:
Hi,
I just purchased Jomsocial + Template Socialize. I use RSForm for my landing page.
I have an image on left and the form on the right side on desktop view.
When I reduce browser to simulate Responsive view, the text come under image but has a width of 50%. This is the width necessary for destopview.
So I add some lines in /templates/socialize/css/template.css
#media (max-width: 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
BUT it doesn't work. width stay 50% instead of 100%. I tried with Chrome & Firefox.
Please see screenshot for better understanding.
Someone has an idea how to fix that?
Try this
#media only screen and (max-width : 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
I think the underlying issue is using max-device-width vs plain old max-width. Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. This will work on desktops when the window is narrowed. */
}
I'm trying to make my website design responsive.
So far, I've got the following rules:
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
For some reason, the last media query doesn't work. In fact, it completely strips all styles from every element on the page.
I've been looking around and I can't find any hint as to why this is or what I'm doing wrong...
I feel like I'm missing a concept or something... Everyone's talking to me about percentages, and while I'm taking that on board, I'm not seeing how it relates to the media queries not applying the style rules.
Can anyone provide any clarity?
Thanks in advance!
You don't have a closing comment tag.
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
Nothing else wrong here.