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)
Related
I made an application that theoretically should be responsive. I tested it in the browser and it worked normal, but when I test it on the phone, the screen does not adjust.
This is the site:
http://transparencia.camarajaboatao.pe.gov.br
What am I doing wrong?
Didn't look on the source just checked it in my android, but if you talk about the buttons size, you can change the size with media queries. Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Example to your case:
1. Add class to the buttons you want. Lets call it "kaftor".
2. In your css file, add:
#media screen and (max-width: 400px) {
.kaftor { width: 45%; }
}
Hope it helps!
You can find practical more examples here: https://www.w3schools.com/css/css3_mediaqueries_ex.asp
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?
On mobile devices, my post's title and date are clashing and overwriting each other. This looks awful. Here is my site. http://defensionem.com/200-russian-soldiers-along-with-t-90-tanks-in-syria/
It is on Wordpress.
How do I fix this? There are no options in the Theme and I can use Custom CSS.
I tried to hide the date but it did not work.
.meta--items_fl{
display:none !important;
}
What you can do here is write media queries to hide specific elements or change their related css at certain screen lengths. For example,
#media only screen and (max-width: 700px) {
div.meta--items.fl {
display: none;
}
}
The above code would hide the date at a screen width of 700px and below. You can mess around with the width the breakpoint triggers to see what works best for you.
To learn more about media queries, you check this out. Hope that helps!
For example, say I have a div and set the background image to 'X' that is displayed only for desktop sizes. When the query changes to mobile I would set the background image to 'Y'.
Would doing this make it so that on a mobile only 'Y' gets loaded and not 'X'? 'X' is a large image and 'Y' is small, I am trying to improve load times. Also if on a desktop would 'X' and 'Y' get loaded or just 'X' and not 'Y'?
You can accomplish this by setting different background images based on the media query.
Unfortunately you cannot set the source of an image tag (only with javascript).
Example:
.container {
background-image: url(big.jpg);
}
#media all and (max-width: 699px) {
.container {
background-image: url(small.jpg);
}
}
You could use the CSS Media Type and screen size to display different backgrounds.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Yes this what media query do
You can create two css for every screen size for example:
#import url("test.css") screen and (min-width: 960px);
#import url("testmobile.css") screen and (max-width: 959px);
or you can add the media query on each css rule.
#media all and (max-width: 699px) and (min-width: 520px) {
}
Please check this link, it helps you
I have created a website and added this line of code for starting media queries:
#media only screen and (max-device-width: 768px) {
.title {
font-size:32px;
line-height:30px;
}
}
But whenever I make a change on media queries, it's also changing the code in the original CSS file. How can i avoid this process. Because I don't want to change anything on desktop view. I only want to make changes on that #media screen. Please help.
There is a change in media query try with my code,
Try my code in codepen