Solved

How can I hide specific images on mobile view only?

Duane87
Tourist
8 0 3

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

Thanks!

Accepted Solution (1)
oscprofessional
Shopify Partner
15897 2378 3084

This is an accepted solution.

@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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 7 (7)

oscprofessional
Shopify Partner
15897 2378 3084

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Duane87
Tourist
8 0 3

Hi there, web address is halortk.co.nz

oscprofessional
Shopify Partner
15897 2378 3084

@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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
oscprofessional
Shopify Partner
15897 2378 3084

@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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Duane87
Tourist
8 0 3

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.pngDuane87_1-1661802082335.pngDuane87_2-1661802198801.png

 

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 

oscprofessional
Shopify Partner
15897 2378 3084

This is an accepted solution.

@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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Duane87
Tourist
8 0 3

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)