I'm currently trying to make some CSS changes to the mobile edition of a website using the Wordpress theme Responsive by ThemeID. I've spoofed my user agent to a Samsung Android, but this site still displays as if it were a desktop. When viewing it on an actual mobile device, the theme changes.
I'm sure I've spoofed my UA correctly because Google, Youtube, Yahoo, MSN, Stack Overflow, etc. all respond to my browser being mobile. Does this theme not really have a mobile view or something?
The theme format is controlled by CSS media queries. No need to forge a UA, just resize your desktop window to a narrower width to invoke the mobile view.
Theme indeed uses Media Queries breakpoints and they will adjust and adapt the layout to any* viewing environment.
Responsive breakpoints are:
#media screen and (max-width: 980px) {}
#media screen and (max-width: 650px) {}
#media screen and (max-width: 480px) {}
#media screen and (max-width: 320px) {}
#media screen and (max-width: 240px) {}
Thanks,
Emil Uzelac
P.S. We have a dedicated support forum, just in case that further assistance is needed.
Related
I have a problem with media queries using dev tools. Why if I select mobile my site (width 1440px) is displayed correctly while I select desktop the site is displayed differently? Is there a specific media query for the desktop devices? My result work only if I select mobile-device on dev tools. If I select desktop-device it seems to use the same version of the tablet query.
These are my queries:
#media only screen and (min-width: 768px) and (max-width: 1023px) -for tablet-
#media only screen and (min-width: 1024px) -for desktop-
Thanks
I resolved it is a "Live Server" extension problem. Maybe from last vs code update.
This is the same media query I've used for all my other WordPress sites but for some reason it's not working for this particular site.
Often I can get away with just using:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px){}
But I've tried that, and I've tried:
#media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {}
But neither are registering. It's not a cache issue, either.
Additionally, for some reason when I inspect the site, everything lists as being received from site/style.css:1 even though my code is around line 604.
It was retrieving the css from all of the desktop styling, so as a test I added #media only screen and (min-width: 1025px) {} to my desktop styling, just to cancel it out, and sure enough, now my landscape header is all reverted back default styling (full sized image, default h1 styling, etcetera). Nothing I do triggers the landscape media query, even though the rest are called without any issues at all. I'm about to pull my hair out, and I can't find anything else on Google that quite fits as a solution.
The mobile and iPad Portrait media queries are working perfectly.
Any help is appreciated!
As I can't comment yet:
Do you use any sort of minifying? And are you sure that your .css file has no errors? With both these questions I'm referring to the style.css:1 thingy.
Sometimes, when I load a page on the Internet on my phone or tablet, it does not look right. Is it possible to inject custom CSS into a page on these devices?
UPDATE:
I am the developer of the site, but it would be cool to change the site without login and to add it to the browser. So only I can see it and I do not have to login.
Browser plugin would not be sufficient. The idea is to add pieces of CSS inside a "webview" on the iphone/ipad for a specific page.
If I understand your question well, you want to create mobile-specific CSS to fix your website's viewing, is that right?
If so, you can use CSS's media queries for so, like this:
#media only screen
and (min-device-width : xxx px)
and (max-device-width : xxx px)
and (orientation : landscape or portrait)
and (min-resolution: xxx dpi){
// your css goes here
}
Here are some links that might help you:
http://help.campaignmonitor.com/topic.aspx?t=164
How to apply different CSS for mobile devices not just based on media width/height
http://css-tricks.com/snippets/css/retina-display-media-query/
As new phones have a really big resolution display (ex: 1280) I'm wondering what is the smartest way to do a CSS media query dedicated ONLY to Phones with 1280.
The issue I have is that if I do this :
#media only screen and (min-width:1136px) and (max-width:1280px)
I will include some desktop reslutions sizes and I want to have a different UI between desktop view and mobile view.
Is there any good practice/solution somewhere for this ?
Thanks a lot !
A great way to target devices like smartphones would be to use min-device-width and max-device-width, e.g.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Smartphone queries here */
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* iPad queries here */
}
Alternatively, you could use Detect Mobile Browsers for mobile/tablet detection.
for the mobile devices just try to check min-device-width and/or max-device-width.
Another possibility is to check the pixel ratio of the device you're targeting
User agent sniffing.
This is not good practice, but if you sniff for useragents serverside and serve different content (html/css/js) to the client (phone, desktop) it works.
Better you should ask yourself what features your UI is designed for, like touch, screen size etc. To detect this you can use CSS media queries and http://modernizr.com/
Per Apple's developer instructions, I am using the following CSS to affect only iPads and iPhones. However, the CSS seems to be affecting older browsers as well (e.g., Firefox 3.5). Any suggestions on how to target only the iPad/iPhone or only target Firefox 3.5, but not both?
#media screen and (max-device-width: 1024px) {
{...}
}
The Media Queries are based on screen size (among other things). To target the iphone you need to change your query to something like:
#media screen and (max-device-width: 480px) {
{...}
}
This will only target devices with a max display resolution of 480px
You can read more here: http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
And I would definitely check out the new Responsive design book from A Book Apart - really really good