On my wordpress site, the background for the front page hero is improperly scaled on mobile devices (iOS and Android). It only shows a fraction of the image as opposed to the full image.
I have tried:
-changing the resolution and sizing of the image
-Unwanted scaling on mobile devices (Inserted the meta tag but no changes propegated, yes I cleared cache too)
-Site scaling on a mobile device (I tried testing CSS changes through USB debugging but it did not work)
I am using the Brooklyn theme created by United Themes. The site also utilizes Visual Composer.
Site: https://www.wearerubbish.com
Current CSS
#media (max-width: 767px)
.parallax-section {
background-position: center center !important;
background-repeat: repeat-y !important;
/* background-attachment: fixed !important; */
background-size: cover !important;
}
An example would be nice so we can take a look at the code, but usually I fix those problems by adding a max-width property with a value of 100vw if the hero is full width and it is a <img> tag. But if the image is a background-image a background-size: cover; will do just fine.
You can try this css
.hero .parallax-scroll-container {
background-size: contain!important;
}
I am sending a email from desktop/laptop to mobile devices, but it loosing css like line alignments spaces and text is coming horizontal.
so please tell me what css I must have to use for android and ios mobiles,
i am using this CSS but not working...
#media only screen and (max-device-width: 566px) {
.campaign_tem {
width: 80% !important;
}
.table_align {display:none !important;width:100%;color:red;}
} `
I ran into this not too long ago, but gmail only accepts inline-styling so nothing in the header.
I created website with responsive menu for PC-browser and Android-browser for Samsung S5 using
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
Menu works only on PC. When website is running on mobile browser (native and chrome also) then .menu block seems to get wanted size but is still invisible, although there is no display: none.
I used z-index for solving my problem but nothing happend and still i can't find bug. When .content display is set on hide, then .menu looks ok. Div .menu seems to be underside(?) of .content but if does, then why z-index doesn't work correctly?
This is this site Website. Can somebody check that issue?
I found problem. Height of .navigator was set on 3em. Div .menu was inside .navitagor
Basically, on a Nexus 7 when the font-size changes on the HTML element it's ignored. If I remove the smaller font size everything works as intended, but this adds it's own issues for phones.
CSS:
html { font-size: 10px; }
#media (min-width: 600px) and (max-aspect-ratio: 21/15), (min-width: 768px) {
html { font-size: 16px; }
}
It works if I remove the first line so the media query isn't the issue. Anyone have any ideas or come across this?
My only theory so far is it might be a bug with WebViews (this is currently in a web view).
I was able to work around this by adding an additional catch-all #media query and not specifying font-size outside of the #media queries.
I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate.
Why is the 480x720 (second media query) defaulting to the first media query?
#media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
#media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
#media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
#media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }
What is expected:
What is actually happening:
Why is the 480x720 (second media query) defaulting to the first media query?
I am a newbie on android and CSS.
I resolved the android not giving they real size with one line in the header of my index.html file:
<meta name="viewport" content="width=device-width" />
From then on, my CSS files did what I expected!
So after doing LOADS of research i have come to this conclusion, Android phones that say they are 480px by 720px (800px or 854px) are actually not, they use a higher screen density to make elements look larger so they actually run at 320px by XXX, but the user can change the resolution to a lower spec if they so wish. The reason that the media query was not working, was because the sizes were not relevant to the device in question.
If your on the SDK i changed the screen density down to 160 to accommodate 480px wide.
And i can confirm i have tested this on the SDK and 2x Handsets.
Note: this was my personal experience it might be different for other users
I think you need to do a device resolution detection in your media query along the lines of
#media (-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min--moz-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
/* high resolution styles */
}
Check David Calhoun's excellent article on mobile best practices.
I was having the same problems while working on a Cordova application for Android platform. Thanks to the last answer, I tried to find out where were the differences between my media query and the width of the devices screen.
I first tried :
#media only screen and (max-device-width: 480px) { ... }
To match devices like HTC Desire HD | Samsung Galaxy S. But I also had to do specific corrections for the Samsung Galaxy Note, so I used :
#media only screen and (min-device-width: 481px) { ... }
But those resolutions, as said before, are not really used like that in the web view, the pixel density has the values changed.
So I wanted to know how many pixels in width were recognized in both DHD and SGS, and then in SGN :
window.innerWidth
For the 480px width phones, I had actually 320px recognized. For the 800px Galaxy Note, I only had 500px recognized. When I saw that, I adjusted my media queries and it worked.
here are a few things I have found in my experience and it may be due to the higher resolution detection.
My favorite test phone is 320px(max-device-width) X 480px(max-device-width) in portrait view. But depending on which mobile browser I use the max-width can be up to 850px!! Opera mobile uses 850px as its default max-width, even though its on a device of max-device-width 320px. Better yet; the built in Andriod browser on this device has a default max-width of 550px. Dolphin defaults to the same max-width, 550px. I don't usually test on FireFox mobile but since it is a gecko based browser like Opera, I wouldn't be surprised if it falls into the 850px range. Does anybody know or tested it?
i typically use a 3 condition media query when addressing 320 X 480 devices.
#media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}
also i usually place this meta tag in my header on the main pageenter code here
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
The following didnt seem to help me, that's when I did some more research and figured out the info above.
<meta name="viewport" content="width=device-width" /> Hope it helps someone else.
Since cell phones are an ever-growing black hole of resolution confusion, you need to tell them to identify themselves. You also need to set the scaling to 1 and take away user scaling. When I put this in my code, it does the trick for me.
Insert this snippet in the head of your HTML on the line below the <meta character...> tag.
<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Convert all px values to em values by dividing them by 16 (so 16px will become 1 em). This makes sure, that sized have the correct proportion regardless on which font is used.
Add to your meta viewport: target-densitydpi=medium-dpi. This makes sure, that the em- sizes behave equally on all (most?) devices