Shopify themes, liquid, logos, and UX
Hi There,
I would like to hide the last two images on mobile only in this multi column section on my website. Is this possible with some additional code? Image below:
Thanks!
Solved! Go to the solution
This is an accepted solution.
@media screen and (max-width:767px){
#shopify-section-template--15130406813901__163434114452c0a296 .grid__item:nth-child(2), #shopify-section-template--15130406813901__163434114452c0a29 .grid__item:nth-child(3) {
display: none;
}}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
this css effect only contact page
@Duane87
Hello,
Can You Please Share Your Store URL...
I Will Check and Provide Proper Solution
Hi there, web address is halortk.co.nz
@Duane87 ,
@media only screen and (max-width: 768px) {
li.multicolumn-list__item.grid__item:nth-child(3), li.multicolumn-list__item.grid__item:nth-child(4) {
display: none;
}
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
@Duane87
Hello,
@media screen and (max-width:767px)
.grid__item:nth-child(2) {
display: none !important;
}
.grid__item:nth-child(3) {
display: none !important;
}
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Like This
Hi there,
This has edited the multicolumn on the desktop version and not mobile. Also it has removed an information section on the home page and also one of the product items on my plans page as shown below:
EDIT: I found what could be wrong is i dont have base.scss.liquid in my theme DawnV2 (only has base.css). Should i create this and add the code? or is there another location this should be added too? Thanks for your time @oscprofessional
This is an accepted solution.
@media screen and (max-width:767px){
#shopify-section-template--15130406813901__163434114452c0a296 .grid__item:nth-child(2), #shopify-section-template--15130406813901__163434114452c0a29 .grid__item:nth-child(3) {
display: none;
}}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
this css effect only contact page
Code was missing a "6" at the end for the 3rd grid item however that worked! Thanks alot @oscprofessional. Im guessing that 15130406813901 is the page id/ code? How can i find this number or apply this code to work on the pages below?
EDIT: managed to find the other IDs using chrome web tools (ctrl+shift+c)
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024