How to Make collection image fit on mobile and show text

Store Design
1

Website:Zoticnewyork.com/collections/chains

How do I make the photos text fit on mobile collection image on my shopify, I already changed the height on mobile but now its to zoomed in and makes the text not show

Screen Shot 2022-08-19 at 3.18.04 PM.png
Screen Shot 2022-08-19 at 3.18.04 PM.png2880Ă—1800 1.04 MB

Untitled-111.png
Untitled-111.png1207Ă—398 483 KB

2

Edit code, i think sending me a code, I know it possible !

1 Like
3

Hi @AMOB !

I`m Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendation.

Sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second

.CollectionItem__Wrapper–small {
height: auto;
padding-top: 100%;
}

Best Regards;

Richard-Pagefly

1 Like
4

Did not work: (

5

Screen Shot 2022-08-19 at 3.51.07 PM.png
Screen Shot 2022-08-19 at 3.51.07 PM.png925Ă—1327 201 KB

6

Hi @AMOB !

Try this code bro.

.CollectionMain .CollectionInner .CollectionInner__Products {
max-width: 1200px;
margin: 0 auto;
}
div#shopify-section-featured-collections section.Section.Section–spacingNormal {
max-width: 1200px;
margin: 0 auto;
}

1 Like
7

Hi @AMOB !

Asset->theme.scss.liquid->paste bellow code in bottom of file

@media only screen and (max-width: 980px) {
 #shopify-section-slideshow .hero {
  height:auto;
 }
1 Like
8

Hi @AMOB !

At the end of theme.css file

.PageHeader__ImageWrapper Image–fadeIn Image–contrast Image–lazyLoaded{
background-image: url(https://cdn.shopify.com/s/files/1/0640/7792/2539/collections/3mm-rope-chain-215280_1800x1800_1cf997bb-f6a8-4324-a76a-b96e2d2d632c_1600x.webp?v=1660986436);
height: 31vw;
}

.PageHeader–withBackground {
min-height: 120px !important;
}

1 Like