I already know HTML, CSS and PHP but I'm a complete beginner in WordPress. I've already set up my WordPress-Theme for Desktop and I'm happy with it and now I've tried to make some tweaks for the mobile theme, but when I open my page on my mobile phone, those changes don't show up. They do show up, in fact, when I scale down my browser window - but not on mobile.
I've tried to make the mobile theme by overwriting the CSS-Selectors with the following:
#media (max-width: 700px) {
…
}
Could it be that WordPress doesn't recognice the #media-Selector? Is there any other CSS-only way to do this without using any plug-ins?
I've already tried finding an answer to my question but all I can find is about plug-ins.
Thanks in advance!
This can't be a WordPress issue, as CSS is interpreted only by the client (being the mobile device or your pc). This may be fixed by adding
<meta name="viewport" content="width=device-width">
to your <head>?
Related
I built sites and want to make it mobile responsive.
It is perfectly working on Chrome and Firefox but not on mobile.
I tested on Inspect though it is working properly on desktop browsers but not for mobile.
How can I fix this?
First and foremost, you should add a viewport on the HTML page.
Type this inside the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
Then, I personally think it's better if you link a bootstrap.css file. And I also recommend to use the media screen of CSS like this:
#media screen and (max-width: 800) {
/* The CSS codes when the device is less than 800 go here */
}
At least, that's how I do it.
And you can go and download or watch the video that I saw on YouTube. I don't remember it's name or link but its length is over an hour and the guy was making a webpage of a gym website.
I highly recommend to type these on your own rather than copying and pasting it, it will help you understand what each thing means, to not forget the codes so that you don't refer these kind if simple things.
My website does fit to the screens of different devices but my media query styles are not working. The problem is also visible when resizing the wordpress website in an IE browser and when using a windows phone emulator (via IE 11). I've tried many different methods to fix this problem but so far none have been successful. All my media queries are in my main style.css
I've tried:
Changing <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width, initial-scale=1">
As per: Responsive web design is working on desktop but not on mobile device
Changing #media only screen and (max-width: XXXpx),only screen and (max-device-width: XXXpx) in my style.css to #media all and (max-width: XXXpx),all and (max-device-width: XXXpx)
As per: Media Queries not working in Internet Explorer 11
I've just deactivated -all- my plugins, cleared the cache, still unsuccessful.
I've also tried validating my website and cleaning up errors as per: Media Query x IE11
I'm completely at a loss and frustrated as this hasn't happen with other websites I've designed and built. I'd appreciate any help I can get with this! Thank you.
This problem has now been solved. After deleting and tweaking files and sifting through support forums for answers, I looked at the stylesheet. It turns out I was missing a closing bracket inside a media query.
/Facepalm...
I made my site responsive using media queries and tested it by resizing my browser and it works fine. I also used a website to see how my page would render on apple devices, specifically iPhones, and the RWD worked. But when I looked at my site on an actual iPhones, or any other smartphone for that matter, it shows the page in "desktop mode"(i.e. not rendered with the media queries). Can someone please explain to me why this is? Sorry I don't have an example but I figured it's a common problem/fix. Thanks guys.
The first thing that comes to mind, as I've done it before, is did you forget your viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
I used Bootstrap for groundwork to develop the site to be responsive. The problem i have encountered is that when I try to watch to watch a site on mobile or tablet device the site wont response to the screen resolution. But when I try the Responsive Design View on Mozilla it all works fine. They order of included css files is Bootstrap, then my custom css and some custom query css which I used to tweak some content things.
Do you have the following within your head of your page?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If the above does not work can you please paste some code from your page for us to see what the issue could be? Thanks.
I used to start my work using html5-boilerplate instead of creating file from scratch. It is awesome for responsive web design.
I am developing a non-responsive website and client needs desktop version for mobiles too (remember how websites opens on mobile few years ago).
I did not make it responsive and do not add any styles in media queries.
I works fine on desktops but when we see the website on a mobile device(or less 940 px wide screens) it does not show complete backgrounds of full width containers(i.e. 100%) instead it only show the background according to width of device.
I am not sure but I think there is problem in following code which is meta viewport:
<meta name="viewport" content="width=device-width" />
I removed this code and test the website but problem remains. Can any one please tell me the solution?
Note: I have build the most of site and now I can not write markup from scratch.
I have found an easiest possible solution to this and its working for me. I just added following code into CSS file (my media query section of at bottom of main.css in case html boilerplate).
#media only screen and (max-width: 900px) {
/* Style adjustments for non responsive websites */
body{width:940px;}
}
Try changing it to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if it works!