How do I hide and show certain sections between phone and computer format?

[lukafernada]

My specific issue is that I have a collage section which looks good on the tableware page, but very bad on the phone:

How can I hide the collage section only on phone, and how would I do the same with other sections (such as an image banner or featured collection)?

[suyash1]

@lukafernada - each section has unique id, using that we can hide using css… if in future you remove this section and add again, id will be changed and css will need to be re-applied

[BSS-TekLabs]

• Here is the solution for you @lukafernada
• Please follow these steps:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before and press ‘Save’ to save it

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[BSS-TekLabs]

If you just want to hide the top part of the photo in your question then use this code. The above code will help you hide all your collage photos @lukafernada .

[Made4uo-Ribe]

Hi @lukafernada

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.page-width.section-template--20658752487773__collage_bwcHtj-padding {
    display: none;
}
}

And Save.

But you have 3 section like this in this page, do you want to hide it all in the mobile screen? If it check this.

@media only screen and (max-width: 749px){
.section-template--20658752487773__collage_bwcHtj-padding, .section-template--20658752487773__collage_dRCWbF-padding,
.section-template--20658752487773__collage_4XmWTa-padding {
    display: none;
}
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[lukafernada]

It is not working for some reason? Is it definitely meant to be in base.css. did it work for you?

[Made4uo-Ribe]

It seems like you add some unecessary signs in the base.css. The search result again got back before edits.

Can you check this sign and take it out.

Line 3524

And line 3533

remove that sign, and save the refresh. Thanks!

[lukafernada]

I’ve taken out those specific lines, still not working. Are you also referring to the parts of code under it?

[Made4uo-Ribe]

That is a bit weird, can you paste on the other file.

Here is the instruction.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

And Save.

You can paste it on this same area.

Thanks!