Debut Theme: Trying to get Desktop and mobile view to look the same

Store Design
1

Hello There!

I am having trouble getting the second photo on my homepage to look the same on Desktop and Mobile view.

I like the mobile view, but it is cut off and looks bad from the desktop view.

Is there anything I can do to get them to look consistent?

Here is my website URL: shopxnoire.com

Also here are some photos to show the comparison between the two:

mobile view
mobile view828×1792 169 KB

desktop view
desktop view4032×3024 1.55 MB

Please let me know. Thank you so much!

2

@noire

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

  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
#shopify-section-160918958813562b86 .hero-fixed-width__image {
    object-fit: contain;
}
1 Like
3

Hi there!

Thank you so much for your reply!

I followed your instructions and it worked! Only problem I am having now is that the image has turned blurry on Desktop view. When I first made the change it was fine, very clear. I have checked back over the weekend and It went blurry.

Did I do something wrong?

4

Hello, I am following up with a reply I sent on Feb 21st. Are you still available to help me work through the issue I am having with my shopify store?

1 Like
5

@noire

sorry for late reply

i have check this but i can’t see any issue can you please share further issue screenshot

6

Thank you for the reply. We took the code off and just added it back on so you could see.

Here is a photo example below:

desktop blurry.jpg
desktop blurry.jpg3024×4032 1.89 MB

phone view clean.png
phone view clean.png828×1792 272 KB

The desktop view is blurry mobile view is clear.

1 Like
7

@noire

Thanks for the clear issue

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

1 Like