Hello, I would like to ask if there would be a way to hide the "feature image" from displaying in mobile views? I am asking that because in most cases the feature image in mobile view does not look good, its blur and does not really shows what that pic is about, so if I could hide the feature image in mobile view it would be great, thank you for your time.
You can do that via the CSS editor: go to Appearance -> Customize -> Additional CSS There you can add some custom CSS to the theme. Target the element you want to apply changes at and write your custom style rules (you can use Chrome Inspector for targeting, here's a guide in case you're not familiar with it: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/).
via apprearance - additional css and is not working i also tried from the file style.css and still no result, you could try it yourself in the template and tell me if its working, thank you for your time.
There's no need to add all those selectors, one is enough. In your case I guess you want to hide the hero image on mobile (until 768px) so that's the code:
Please note that using @media screen and (max-width: 768px) the hero is still visible when the browser window is > than 768px. Hope that clears it up. Cheers!
P.S. If you're still having trouble, please provide the URL of your site so I can check it out.
Hello, I would like to ask if there would be a way to hide the "feature image" from displaying in mobile views? I am asking that because in most cases the feature image in mobile view does not look good, its blur and does not really shows what that pic is about, so if I could hide the feature image in mobile view it would be great, thank you for your time.
Looking forward to a reply.
Hi George,
You can do that via the CSS editor: go to Appearance -> Customize -> Additional CSS
There you can add some custom CSS to the theme. Target the element you want to apply changes at and write your custom style rules (you can use Chrome Inspector for targeting, here's a guide in case you're not familiar with it: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/).
Cheers!
Hello, i tried to use custom css but it seems not to be working, i used that "
.is-bg-image {
display:none!important;
} "
in Appearance -> Customize -> Additional CSS and i also tried to use that on style.css but still not working, any ideas?
Thank you.
You should target the element you want to hide Example (see screenshot): Let's say you want to hide that image on smaller devices:
@media screen and (max-width: 768px) {
.single-thumbnail { display: none; }
}
Hope that that clears it up!
i have tried this
@media screen and (max-width: 768px) {
div#hero.hero.is-bg-image.is-text-light.is-centered.is-fullheight { display: none!important; }
}
via apprearance - additional css and is not working i also tried from the file style.css and still no result, you could try it yourself in the template and tell me if its working, thank you for your time.
Hi,
There's no need to add all those selectors, one is enough. In your case I guess you want to hide the hero image on mobile (until 768px) so that's the code:
@media screen and (max-width: 768px) {
#hero { display: none!important; }
}
Please note that using @media screen and (max-width: 768px) the hero is still visible when the browser window is > than 768px. Hope that clears it up. Cheers!
P.S. If you're still having trouble, please provide the URL of your site so I can check it out.