How can I optimize my online store for both desktop and mobile view?

Store Design

Topic summary

Problem: The homepage looks fine on mobile but is overwhelming on desktop due to oversized images and small text. The goal is to style desktop and mobile differently.

Proposed approaches:

  • Use CSS media queries (CSS = Cascading Style Sheets; media queries apply styles based on screen size). One suggestion targets desktop (min-width: 750px) and constrains a specific homepage section to 60% width and centers it by adding code to theme.css.liquid.
  • Another suggestion advises adding CSS near the in theme.liquid to cap widths (referenced “1000px”), but the actual code snippet is missing in the post.

Guidance requested:

  • OP asked where the CSS file is in Shopify’s code editor and requested more step-by-step instructions.
  • OP also asked how to resize desktop images while keeping the header and first banner unchanged.

Additional context:

  • A screenshot was provided to illustrate the section being targeted. Store links were shared (maskicare.store; fireblankethoodies.com). Multiple users reported the same desktop issue and asked for help.

Status:

  • No confirmed fix yet. OP’s question about excluding header/banner remains unanswered. Discussion appears open/ongoing.
Summarized with AI on January 7. AI used: gpt-5.
1

My shopify store looks great on mobile but is bad on desktop. The images on the desktop version are too big and the text is too small. I don’t think there is a way to change the settings on the desktop version while keeping those on the mobile version the same. Basically, I need to optimize my website for both desktop and mobile but don’t know how to.

1 Like
2

Hello. In Shopify, you can edit the appearance of the site for both mobile and desktop versions.
You will need to do some magic on the theme code.
Share a link to your store, we will help you.

3

It’s Maskicare.store

4

In order to reduce your desktop content, go to the theme code editor and add a theme at the very bottom of the file.css or (theme.css.liquid) code :

@media screen and (min-width: 750px) {
.section#shopify-section-template--16160616022238__1656001473f989b112 {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
 }
}

screenshot 2022-06-24 в 01.36.36.png
screenshot 2022-06-24 в 01.36.36.png1139×1186 145 KB

5

which folder is the file under? I’m new to shopify’s code editor.

6

Could you be a little more descriptive. I’m new to editing code. Sorry about that.

7

@Brianm604

Could you please send a screenshot of what you’d like to modify?

8

It’s nothing in particular. It’s just that all the photos on the homepage of my website are too big and make the page overwhelming for visitors. This only occurs on the desktop version. The mobile version of my website look fine. I was wondering if I could change their size or modify the homepage website.

9

The website is Maskicare.store

10

@Brianm604 ,

You can try something like this to reduce the images’ size on desktop.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:

The 1000px can be anything else you wish.

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

2 Likes
11

Is there any way I could do this while keeping the header and the first image banner the same size as before?

12

Hello dear

did you find solution for this issue?

13

Hello

i have same issue with desktop viewing

can you help please ?

14

We have the same problem with our website, can you please take a look at it !?

www.fireblankethoodies.com

Thanks, you’re awesome!