Why is my full image not displaying on mobile view after code change?

Store Design
1

My mobile view is not showing the full picture as it used to after I changed some codes.

This is what the picture is supposed to look like: (Full size)

IMG-3851.PNG
IMG-3851.PNG828×1792 178 KB

How it is now: (very zoomed in)

IMG-3850.PNG
IMG-3850.PNG828×1792 190 KB

My website name is: chrystaljewellery.com

Can someone please help me to fix the code?

Thanks :slightly_smiling_face:

Christine

2

Hi @cjewelleryau ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 560px) {
.hero-wrapper .hero__image {
    object-fit: contain;
}

.hero-wrapper .slick-list {
    height: auto !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

Hi, it works but I want to keep the red highlighted part. I hope it make sense. How do I do that? Thanks.

9372F9B4-808E-45A0-A8A4-670EFF99AA73.jpeg
9372F9B4-808E-45A0-A8A4-670EFF99AA73.jpeg828×1792 117 KB

4

Just explaining: I want to have the red part Instead of having the top flat like this.

40FB1F9B-5B53-4040-8F7A-ADE4FA80EBD8.png
40FB1F9B-5B53-4040-8F7A-ADE4FA80EBD8.png828×1792 225 KB

5

Hi @cjewelleryau ,

You can try add more below code in theme.scss file:

@media (max-width: 560px) {
.hero {
    height: auto !important;
}
#shopify-section-slideshow + #shopify-section-featured-collections {
    margin-top: -30px;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
6

The code works! Thank you very much for your help, AvadaCommerce, I have accepted you as the solution.

1 Like