Full size photo

Store Design

Topic summary

Goal: make the first homepage photo display at full size on a Shopify theme.

What was done (desktop):

  • Edit theme CSS (base.css/theme.css/styles.css/theme.scss.liquid) and add a desktop media query (min-width: 750px) to increase the Image Bar height. Two variants were suggested:
    • Set .image-bar–medium .image-bar__item to 2727px height.
    • Or add a block in theme.liquid setting .image-bar__content and .image-bar__item to 1800px height.

Issue raised: desktop looked correct, but mobile did not.

Mobile fix:

  • Add a mobile media query (max-width: 749px) to set .image-bar–medium .image-bar__content height (example used 500px) to control mobile display. A screenshot was provided to show the result.

Notes:

  • Solutions rely on CSS media queries (different rules for desktop vs. mobile) and target the Image Bar section classes.
  • Code snippets and screenshots are central to the solution.

Outcome/status:

  • After adding the mobile rule, the requester expressed thanks; the thread appears resolved with no further open questions.
Summarized with AI on December 26. AI used: gpt-5.
1

I would like to make the first photo of my homepage full size. If anyone could help I’d be very much appreciated!

www.tiffanynoyama.com

Thanks so much in advance.

2

Hi @Tiff2 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSCommerceHDL_0-1719207128233.png
BSSCommerceHDL_0-1719207128233.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSCommerceHDL_1-1719207134131.png
BSSCommerceHDL_1-1719207134131.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 750px) {
  .image-bar--medium .image-bar__item {
      height: 2727px !important;
  }
}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

Hello @Tiff2

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media only screen and (min-width: 750px) { .image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item { height: 1800px !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
4

thank you so much!

5

thanks a lot!

6

Thanks for your help!

1 Like
7

@Tiff2 , No problem, Have a nice day :heart_eyes:

1 Like
8

@niraj_patel @BSSCommerce-HDL @pwcsangeeta

thanks so much for your help!

It’s very strange, the desktop version is showing full size, but not on my mobile. Any idea why?

Thanks again!

1 Like
9

Hi @Tiff2 , Pls insert this code to your file css:

@media only screen and (max-width: 749px) {
  .image-bar--medium .image-bar__content {
    height: 500px !important;
  }
}

Here is result:

BSSCommerceHDL_0-1719211298923.png
BSSCommerceHDL_0-1719211298923.png482×811 303 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
10

Thank you for your help!

1 Like
11

@Tiff2 , We are pleased to assist you :heart_eyes: