I would like to hide a section from my homepage on mobile

Steel-23
Tourist
18 0 3

Hi I have one section i would like to hide on mobile but i cant seem to get it to work can i have assistance please

URl is: https://steelbuildmasters-co-uk.myshopify.com/

Thanks

0 Likes

Hi, could you provide password for your store, it's password protected : ) And please, attach screenshot or name of section you would like to hide on mobile. Will be glad to help you!

0 Likes
Steel-23
Tourist
18 0 3

Hiya yes password is: fliebi

have attached screenshot its the usp bar section (Turquoise colour)

0 Likes

Cool, i see that there are 2 equal  sections on mobile, do you want to remove all of these sections, or just first one?
Also there are no specific classes for this section, you will have to make small changes in the code, to hide these sections on mobile version.

 

0 Likes
Steel-23
Tourist
18 0 3

Yeah i want to remove the whole section, yeah anything i need to add to the code is fine with me might just need some guidance

0 Likes

You can add such css code to the bottom of your theme.scss file, it should work:

 

 

@media ( max-width: 767px ) {
  .index-section--flush{
   display: none;
}

}

 

 

 

But it would be better if you find this section in your theme files > sections > ( file of this section )

and add there custom class for example "mobile_hide",  but if my css code will work fine on all the pages, so than it's not necessary  

 

0 Likes
Steel-23
Tourist
18 0 3

Great that worked to hide it!

I have one more question i have this at the bottom above the footer of my page also i dont want to hide this one on mobile just the top one do i need to alter what i code I have added to do this?

Thanks

0 Likes

The best way to do it would be to add a setting to section schema  json, you can also try to change css like this:

 

@media ( max-width: 767px ) {
  .index-section--flush:first-of-type{
   display: none;
}
}

 

But it's bad solution if you wish to change order of sections in future, but for now it has to work : )

 

0 Likes
Steel-23
Tourist
18 0 3

they still both show for me with this

0 Likes

Hmm that's strange, make sure that you replaced old css which i wrote, to this new one

 

0 Likes