Shopify themes, liquid, logos, and UX
Using CSS, how would I make a particular block in a mosaic grid invisible on mobile view?
Solved! Go to the solution
This is an accepted solution.
Hi @JosenAndersen,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
@media (max-width: 45em){
#shopify-section-template--19339290280273__mosaic_grid_xaKVBM .mosaic-grid__item:nth-child(2) {
display: none;
}
}
Hi
1. Go to online store -> theme -> edit code.
2. Open theme.css
@media only screen and (max-width: 767px) {
.your-block-class {
display: none;
}
}
But does this make this one particular image invisible? (See my photo).
I do not want it to make all blocks invisible on mobileview.
Actually, Your photo has not enough info for this. I need more info about parent component or class. Btw you can try like follow code.
@media only screen and (max-width: 767px) {
.mosaic-grid__item-image img {
display: none;
}
}
you can replace .your-block-class with the actual CSS class or ID of the block you want to hide.
Where do I find the ID of the block I want to hide?
You can find out id in parent component what you want to hide.
There is no id at the moment. if you want to hide the image, at first, you should set id for the image block in them.liquid.
And then you follow my first reply. Thanks.
Is that something you can let me know how to do?
What code should I enter in theme.liquid?
Hi @JosenAndersen,
Please send me the store link, I will check it for you
This is an accepted solution.
Hi @JosenAndersen,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
@media (max-width: 45em){
#shopify-section-template--19339290280273__mosaic_grid_xaKVBM .mosaic-grid__item:nth-child(2) {
display: none;
}
}
Hi @JosenAndersen,
If you have any questions, you can contact me directly.
Happy to help you 😊
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024