How can I hide specific images on mobile view only?

Store Design
1

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:

Duane87_0-1661460187550.png
Duane87_0-1661460187550.png1324×667 499 KB

Thanks!

2

@Duane87
Hello,
Can You Please Share Your Store URL…
I Will Check and Provide Proper Solution

3

Hi there, web address is halortk.co.nz

4

@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

5

@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

oscprofessional_0-1661753301975.png
oscprofessional_0-1661753301975.png1018×854 273 KB

6

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:

Duane87_0-1661802044449.png
Duane87_0-1661802044449.png1014×844 470 KB

Duane87_1-1661802082335.png
Duane87_1-1661802082335.png1240×633 134 KB

Duane87_2-1661802198801.png
Duane87_2-1661802198801.png353×228 4.69 KB

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

7

@Duane87

@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

1 Like
8

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?

basemap

30-day-free-trial

EDIT: managed to find the other IDs using chrome web tools (ctrl+shift+c)