Hide Collection in Collage on Mobile View

[Challen]

Hey I'm looking to hide the "Classic Lion Collection" in the collage of my home page on mobile view, and keep it visible there on desktop view. My website is https://www.leosworldwide.com. Thanks for any help!

[PageFly-Kate]

Hi @Challen ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/collage.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px){

.collage__item.collage__item--product.collage__item--right {
    display: none;
}
.collage--mobile {
    grid-template-columns: repeat(1,minmax(0,1fr));
}
}

Hope my answer will help you.

[Challen]

That hid the wrong item in the collage. I need to hide the other one please.

[PageFly-Kate]

Sorry for misunderstanding

Please remove the code in my previous answer and replace it with the code below:

@media screen and (max-width: 749px){
.collage__item.collage__item--collection.collage__item--right {
    display: none;
}
.collage--mobile {
    grid-template-columns: repeat(1,minmax(0,0fr));
}
}

[Challen]

That worked for the top collage how I wanted it too, but it also unfortunately removed the second image in the second collage on my home page. Can you get that image back? It's the bottom collage with the black/white pictures of the girls. It should have three images.

[PageFly-Kate · Accepted solution]

You can try this code 😁:

@media screen and (max-width: 749px){

.collage__item.collage__item--collection.collage__item--right {
    display: none;
}

.section-template--17961074164028__collage-padding >.collage--mobile {
    grid-template-columns: repeat(1,minmax(0,0fr));
}
}

[Challen]

That worked perfectly, thank you!!

[hgfgfg]

hi kate, im trying to remove the image collage how would that be done? ie i only want the image collage to show in deskptop, not in mobile view