Could someone please help me with the following customizations?
- Make the collection banner visible on desktop but hidden on mobile.
- Make the media grid visible on mobile but hidden on desktop.
Thank you!
@Sheeks - after publishing the page, you can go to browser and inspect the section, get the section id and then using css you can hide/show sections as per your need
I’m sorry, but I’m quite new to this. Could you please provide more details on how to obtain the CSS and section ID? Specifically, how do I find the section ID, and use CSS to hide/show sections? Any step-by-step guidance would be really helpful!
Thank you!
@Sheeks -
1] publish your page
2] open the page in browser
3] right click on the section you want to hide
4] click on inspect element
5] you will see all the code, in this code you will have section id
I’m sorry, but I’m quite new to this. Could you please provide more details on what code I should look for, what exactly I need to add, and where to add it?
Thank you!
@Sheeks - can you please share home page link? with password to view page, if any
owh, its sheeksorority.com. no pswd
@Sheeks - check these screenshots
using these ids you can show/hide your sections with CSS media queries
So you mean I need to copy the ID, right? What do I do with the CSS media queries after that?
Thank you!
@Sheeks - you can see css for these ids, so the css you apply will be applied to these specific sections only and will not affect other content in site, since you have multiple sections and have different requirements, you will need to write css for each of it. If yo do not know css at all then you can take help from developer
By “developer,” do you mean the Shark support team? They usually only help with small bugs and not design issues. Could you teach me how to write the CSS for these sections instead?
Thank you!
@Sheeks - support team will not help for these changes, which section do you want to hide on mobile?
- The collection banner visible on desktop but hidden on mobile.
- The media grid visible on mobile but hidden on desktop.
These two, pls
@Sheeks - add this css to the very end of your base.css file, it is to hide banner on mobile view, media grid not viisble
@media screen and (max-width:749px){
section#shopify-section-template--22817597194515__collections_banner_list_iGdxbN{dissplay:none; visibility:hidden;}
}
I am sorry, but i dont think its working
@Sheeks - my mistake, remove one s from dissplay to make it display
I am sorry, unfortunately it still not working
below is desktop version(collection banner is there, but media grid visible there)
n for mobile view, the media grid is there n the collection banner is not there (same as what i want) but its bcom empty space
Wait. i think i just need to refresh
so the mobile version is perfect now. the media grid there while the collection banner is hidden
But but, for desktop version, only collection banner should be visible but here media grid also visible
pls help
@Sheeks - display spelling i not correct, also add this css to hide media grid
@media screen and (min-width:750px){
section#shopify-section-template--22817597194515__media_grid_PqwjgK {
display: none; visibility: hidden;}
}
YES, its working now. Thank u so much!
1 Like