A definite need for @media solution.
As an example, try:
@media screen and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
img {display: none;}
}
You may want to choose some specific images rather than all images.
Take care with the needed extra curly brackets around the @media which is a common mistake.
Thread Starter
David_G
(@questas_admin)
So how would I list specific images? I don’t want to block the carousel images, but rather some specific images on pages or all images on all pages. Would I use the example below?
@media screen and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
IMAGE1.jpg {display: none;}
Image2.jpg {display: none;}
}
Or would this work instead
@media screen and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
.page img {display: none;}
}
Thread Starter
David_G
(@questas_admin)
Neither one of those work
You have to address a specific image by assigning a .class or #id in the html.
eg <img id="image1" src="<LOCATION>image1.jpg>
then
#image1 {display:none;}
If it was on a specific page:
.page-id-100 #image1 {display: none;}
(Note: I’ve simplified the img clause for readability)
Or you could add a class to the images you want not to show (assuming they won’t change often). Then just add a display: none for that class.
Thread Starter
David_G
(@questas_admin)
HMMM still isn’t working. Here is the snippet I added to style.css. It is the home page. SITELINK
@media screen and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
<img id=”1404335093″ src=”http://youneedthissite.com/site6/wp-content/uploads/1404335093.jpg”>
.page-id-99 #1404335093 {display: none;}
}
I tried it both with and without the page-id.
Nope. That’s mixing up html and CSS.
I suggest you take this simpler approach:
1. Remove what you’ve inserted above
2. For every image you want not to show on phones:
– Find the image inside the page;
– Find where it says <img class="alignnone .... (or alignleft, or alignright);
– Just before alignnone, add hidden-phone (with a space between hidden-phone and alignnone).
So the code for each image will now read:
<img class="hidden-phone alignnone ....
This will stop the image showing on browser widths below 767px. It works on Customizr because of the underlying Bootstrap grid system. It will not necessarily work on other themes.
Thread Starter
David_G
(@questas_admin)
It’s magical 🙂 Oh yea, that “hidden-phone” worked.
Thank You to rdellconsulting and ElectricFeet for the help.
