I working on a website which has vertical navigation menu on left side. now i have to reduce the width of navigation menu but when i reduce width with normal css for desktop view it also affect the mobile view, it also reduce the width in mobile view.
So is there any other solution from which the css should apply only for desktop view. it should not affect the mobile view menu header.
Thanks
How to apply css only for desktop view in wordpress.
1.) desktop view media queries.
#media only screen and (min-width:768px){
here your code ...
}
#media only screen and (min-width:910px){ <!-- wordpress. twentysixteen theme -->
here your code ...
}
================================================
How to apply css only for Mobile view in wordpress.
#media only screen and (max-width:767px){
here your code ...
}
#media only screen and (max-width:909px){ <!-- wordpress. twentysixteen theme -->
here your code ...
}
===============================================
/* saf3+, chrome1+ */ you have any problem chrome, and safari, mobile view and desktop then use below this media
#media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
Use media queries. Decide a minimum width for your desktop view. It should look something like this.
#media only screen and (min-width: 1000px) {
/* Css for Desktop goes here like sample below*/
.desktop-header{height:100px;}
}
Remember you need to use min if you only want to change elements for your desktop view, this means all widths equal to or beyond the pixels you choose.
Also you need to use
<meta name="viewport" content="width=device-width, initial-scale=1">
in the head of your html to be responsive. *Note beyond media queries you would have to use a type of agent detection, this will see what platform the user is on based off of the browser and serve up content based on that, but I do not recommend this method.
Use css media queries for desktop device only
example:
Desktop
#media only screen and (min-width: 1200px) and (max-width: 1920px) { .classname{width:250px}
}
here goes links for desktop and mobile media queries Media Queries: How to target desktop, tablet and mobile?
Related
I am creating a mobile design for certain mobile screens, so I want to apply my styles for screens that are 275px wide up to 812. Currently for some reason the styles defined for this media query get applied from 303 to 812 width but bellow that they don't have any effect. Is my media query wrong for what I am trying to achieve? Here is how it looks:
#media screen and (min-width:275px) and (max-width:812px) {}
and here is my view port line in the html:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Your code looks good; it's working just fine on here. I'm not sure what you're trying to achieve but the media query won't work below a specified minimum width (or below 275px in this case). It will be bound to the constraints you have set.
#media screen and (min-width:275px) and (max-width:812px) {
body {
background: blue;
}
}
If what you want to achieve is to have a particular style applied from 275px to 812px of screen width:
#media screen and (min-width:275px) and (max-width:812px){
this is correct, i've tested it in chrome dev tools and it seems fine,
with that code it correctly apply the styles from 275px until 812px.
maybe the problem is in other media queries
I'm trying to hide the header image of https://gambiaschoolsupport.org/ on mobile devices.
I've used what I think is the correct CSS and when I preview the site in a virtual small screen the image is hidden.
}
#media (max-width: 768px) {
.header-image {
display:none;
}
But when I view the site on an actual mobile device, the image is still there! What is going on?
I have checked your site and found that your internal style tag contains display:block for .header-image class. Remove that and check. But before you do so, also remove display:none from .header-image class which is given in https://gambiaschoolsupport.org/wp-content/cache/autoptimize/css/autoptimize_de8fa02bd732efd9e22723257049a7e0.css. Let me know if that works for you.
Use Media screen
#media screen and (max-width:768px)
I am developing a website which will be responsive in that different CSS styles are applied depending on the width of the users' browser.
the method chosen was to use CSS media queries.
my problem is this: when I use the following code
#media screen
and (min-width: 200px)
and (max-width: 800px)
{
#example
{
background: purple;
}
}
this works when I resize the window on my PC, but is not recognised by my phone whose resolution is within the limits.
perhaps more perculiarly, when I use the following code
#media screen
and (min-device-width: 200px)
and (max-device-width: 800px)
{
#example
{
background: purple;
}
}
this has the inverse effect: displays on phone, but not on PC.
as far as I have read there is no scope for an "OR" operator for something along the lines of the following to be valid
#media screen
and (
((min-width: 200px) and (max-width: 800px))
| / || / OR
((min-device-width: 200px) and (max-device-width: 800px))
)
{
#example
{
background: purple;
}
}
so my question is this: is there a way test responsive CSS on both desktop and phone simultaneously?
I have tried so many combinations:
using #media only screen,
using Android, Firefox and Chrome browsers on the phone,
but to no avail, the result is always the same.
The only way I can think to do this at the moment is to create two separate stylesheets, one for desktop and one for phone, but this would mean updating two stylesheets every time I wanted to view changes in the browser, which is impractical and counters the idea of responsiveness.
I looked into using the orientation: landscape/portrait target, but as far as I can make out this would again involve writing two sets of CSS.
One last consideration is that the website is currently using pure CSS; so no javascript, user-agent determination nor server-side scripting at this point in time.
This must be possible so any insights will be appreciated. I'm sure someone will have had the same problem and enlighten me.
Try using a viewport meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1" />
Place that into the head section of your page.
I have seen many sites that are responsive both on desktop browsers and mobile phone browsers, I am working on a site and I have the following stylesheet setup: (The Hicks Design website is a good example of what I want to achieve if you need one)
/* Normal styles go here */
#media screen and (min-device-width:321px)
{
/* Styles */
}
#media screen and (min-width:701px)
{
/* Styles */
}
#media screen and (min-width:1025px)
{
/* Styles */
}
#media screen and (min-width:2049px)
{
/* Styles */
}
However my stylesheet above only seems to work on desktop browsers. (tested with Android Firefox and the default Android browser on a Sony Xperia Ray)
The Hicks design site's rules are very similar to mine, however they make use of min and max but either for me doesn't seem to work on both mobile and desktop browsers. (I plan on optimizing my media queries more I am just trying to get the basics to function as I want them to at the moment).
If I use max-device-width instead of max-width it becomes responsive on mobile browsers, but not desktop browsers...
I have tried the following following to get around the issue:
#media screen and (max-width:480px), screen and (max-device-width:480px)
{
/* Styles */
}
also:
#media screen and (max-width:480px), and (max-device-width:480px)
{
/* Styles */
}
However I don't think either of these are correct as the web developer toolbar for Firefox complains about it. I have also tried a few variations on the above rules but still can't get it to work.
From what I understand max-width reads the viewport width (say.. .the width of the browser window) and max-device-width reads the actual width of the screen you are using to view the site. - I'm confused why max-width doesn't seem to read the mobile's browser width.
I think I'm possibly missing something obvious about media queries here... It doesn't seem to make sense that if I want my site responsive on desktop and mobile browsers I must make a copy of all of my media queries and just change the query from 'screen and (max-width)' to 'screen and (max-device-width)' or vice versa. (which I'm ashamed to even type as a workaround here)
How can I combine the (max-width) and (max-device-width) rules or how can I achieve this?
If you'd rather not read all of the above:
I am using #media screen and (max-width:480px) however it seems only #media screen and (max-device-width:480px) works on mobiles. How can I combine both of these rules to achieve a responsive design on mobile and desktop browsers?
There are a lot of medias out there, and if you want to select only by its properties, use the all keyword:
#media all and (max-width:480px)
{
/* Styles */
}
Edit:
Combine rules with or:
#media all and (prop1:val1), all and (prop2:val2)
{
/* Styles */
}
Combine rules with and:
#media all and (prop1:val1) and (prop2:val2)
{
/* Styles */
}
#media screen and (min-width:240px) and (max-width:480px),
screen and (min-device-width:240px) and (max-device-width:480px)
{
/* Styles */
}
Resolved the issue, previous answers helped me so voted up. Thanks.
What is the advatange of using Head.js screen size detection over CSS3 media query?
Head.js Screen size detection
.lt-1024 #hero { background-image:(medium.jpg); }
CSS3 #media query
#media only screen and (max-width: 1024px) {
#hero { background-image:(medium.jpg); }
}
If it's just a matter of CSS vs JS choice, which one is more trustworthy for mobile design?
CSS media queries are not supported by all mobile browsers (see Browser compatibility – viewports). That’s why it could help to have another indicator.
But you can not only use this for mobile web sites but also for web site for desktop web browsers.