Solved

Hide Column Images for Mobile 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
15830 2369 3072

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 | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 7 (7)

oscprofessional
Shopify Partner
15830 2369 3072

@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 | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Duane87
Tourist
8 0 3

Hi there, web address is halortk.co.nz

oscprofessional
Shopify Partner
15830 2369 3072

@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 | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3072

@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 | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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
15830 2369 3072

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 | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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)