I have created a big cartel theme and successfully installed it. Media queries inside the code work correctly on my computer, however when I load the site on my iPhone, it appears at the original width – it should be taking into account the max-device-width: 480px. Any help solving this issue would be really appreciated, thanks in advance.
Make sure you include !important as this overrides all other code:
#media screen and (min-width: 767px) and (max-width: 1200px) {
.class {
font-size:1.2em !important;
color:#ffffff;
}
}
Like that.
Related
My problem is that I cannot get media query to work on iPhone 5s iOS 9.3.2 Safari. I have a full screen video on my page what I'd like to change into an image on mobile. I have followed this tutorial to make it happen.
I have specified the viewport like this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have included !important tag in every css entry I need to be changed when being 640px, like this:
#media only screen and (max-device-width: 640px) {
html {
background: url('image.jpg') no-repeat center center fixed !important;
background-color: rgba(0, 0, 0, 0) !important;
}
#video {
display: none !important;
}
body{
background: rgba(0, 0, 0, 0) !important;
/*also tried with background:transparent !important*/
}
}
I decided to use 640px as it is the exact amount of pixels what gets rendered on iPhone 5s according to this source.
I have specified that the background should be transparent as it seems to be the only option to work around the default template style. Meaning when background becomes transparent the background image shows up.
I have read this and this. I have applied the suggested solutions to my problem but none of them worked.
NOTE: I don't have the Mac machine to test this issue via iPhone's web inspector. Making a VM on Windows seems to be not a one hour job.
I have tested my code in Chrome 50.0.2661.102 m (64-bit), Mozilla 46.0.1 and Edge on Windows Phone everything works fine.
I have tried to work with Safari 5.1.7 (the last version released for Windows), but it seems to be very outdated (as expected).
I have also cleared the cache with Ctrl+Shift+R and tried to use Incognito mode.
UPDATE: if I specify the color (for the sake of testing) before the image I will be then able to see the specified color in Safari, but no image:
background: green url('image.jpg') no-repeat center center fixed !important;
Any idea how to solve this?
While waiting for help I've found a workaround just for my case. Thanks to #daemeron's answer.
So instead of implementing separate styleheets for different devices it is just possible to hide the annoying Play button on the background by:
*::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none
}
This works great on iPhone and Windows 10 mobile. Exactly what I was looking for.
I am having some trouble with this and haven't found a solution.
The solutions I find are for background-size:cover; when applying to a whole page, whereas I am using this on a specific div.
First, the site is http://www.sexypizzamarketing.com.
If you check this site, there is a DIV with a background-size:cover for an image, and here is the css:
#div3 {
margin-top:40px;
background-image:url("images/Desert.jpg");
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:100%;
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#914211;
color:#201E1E;
background-color:#A4FFEE;
height:600px;
}
so as you scroll down, this 600px div moves over a fixed image. all of the research I've done is talking about how this background-position:fixed does not work on mobile. but when ive tested this on my android phone and a windows phone (and all browsers on PC) this has worked.
so really, unless you have an iphone, you won't be able to see this problem. ive used testmobile.me to test iphone, and it does not show up there. This is driving me crazy, because until now, I've been editing the live site, then asking someone to screenshot the site and send it to me... yea. 1. does any one know how to solve this?
So next, I decided to scrap this on iphones, would get rid of it for iphones. so I included this in css,
#media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
/* CSS overrides for mobile here */
#div3 {
background-color:black;
height:500px;
background-image:url("images/Background.jpg");
}
and this isn't hasn't solved it either.
**EDIT. this makes sense, but I didnt realize it. I put the #media only css to specify device width for a specific div (div3) above the regular div3 css, so it wasn't overriding. I moved it to the bottom of the section, allowing the #media to override the div3 css, so this solved that. A few things- this targets all media devices max width:700px, not just iphones. so i will look into that (because the site worked fine on windows and android phone)
As soon as I get the spare iphone and figure out how to connect it to localhost, then I will try the suggestions from alexander, because I don't want to risk messing something up by editing the live site through cpanel.
I'll be getting an old iphone for testing purposes as well.
but any suggestions, or if you can point me in the right direction, I'll make you some shrimp tacos or something.
I am developing an android app using JQM and PhoneGap . The app appears good in low end devices but the letters appear extremely small on high end tablets.I have tried modifying the viewport tag after browsing through so many sites.It would be very helpful if someone could give a resolution so that I can concentrate on functionality rather than the layout and resolution.
Use CSS media queries to configure font styles based on device resolution.
Example:
#media screen and (max-width:600px) and (max-height:963px) {
.fontClass {
font-size: 38px;
}
}
#media screen and (max-width:320px) and (max-height:568px) {
.fontClass {
font-size: 28px;
}
}
This is a bit of an odd one and was wondering if anyone had a solution.
We're building a few websites just now that are over 1000px in width and for some reason when the iPad loads them up in portrait mode it's scaling them down but leaving some width on the right so you have to scroll just a little over to see everything.
I added <meta name="viewport" content="initial-scale=0.7;" /> which does fix the problem but when loaded in landscape the user is presented with a small site to start with and can zoom out too far.
An example of this can be seen on one of my personal development sites. This isn't live yet so please ignore any bugs http://www.dundeewebstandards.com/events/
Thanks,
Chris
I had this same problem and tried all of the proposed solutions that I could find, to no avail. Finally, I figured it out... If the height of your page is less than 1024px and the width is greater than 768px, the native zoom functionality does not work as expected. This is also true if the width of your page is greater than it's height. Try using a media query to add a min-height to your page. Here is the code I used to fix this problem...
#page-container{
width: 1200px;
margin: 0 auto;
}
#media screen and (min-width: 768px) {
#page-container{
min-height: 1240px;
}
}
My jquery mobile page is WAY to zoomed out. I have tried everything I can think of, but I cant get it to zoom in.
This is the last thing I have been trying:
.ui-mobile-viewport {
max-height: 440px !important;
max-width: 500px;
}
How do you zoom in a page? I just want the page to fit normally on the phone
I believe you are looking for the viewport meta tag: http://davidbcalhoun.com/2010/viewport-metatag
EDIT:
Perhaps I don't fully understand the problem, but maybe you could try to fix it within the following CSS #media queries:
#media all and (orientation:portrait) {
/* set some widths maybe? */
}
#media all and (orientation:landscape) {
/* second verse same as the first */
}
Finally, if I'm still off base, do the answers here help? How to set viewport meta for iPhone that handles rotation properly?