Image banner - Edit the width of the banner on the laptop format only

Store Design

Topic summary

A user wants to reduce the height of a blue PETA logo banner on their Shopify store’s homepage (tashisarl.com), but only for desktop/laptop views—the banner appears too prominent and draws excessive attention.

Initial confusion: The user’s terminology mixed “width,” “thick,” and “thinner,” causing brief misunderstanding about whether they wanted horizontal or vertical adjustments.

Solution provided: Add custom CSS targeting the specific banner ID using a media query for screens 749px-1500px wide:

  • Set height: 70% (or adjustable percentage) on the banner container
  • Apply object-fit: fill to the image element
  • Code goes in the theme’s CSS file (base.css/style.css/theme.css)

Outcome: The solution successfully reduced the banner’s vertical height. The user adjusted the percentage to 80% for their preferred appearance.

Status: Resolved—the banner now displays less prominently on desktop while maintaining mobile formatting.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi

I have an image banner on this website: https://www.tashisarl.com/

The image banner is a bit too thick. I would like draws so much more attention to it that I would like. But only on the computer/laptop version. Can I edit the laptop/computer version only to make it thinner? How can I fix it. screenshots attached.

Thank you,

Michella

Screenshot 2023-11-22 at 16.43.27.png
Screenshot 2023-11-22 at 16.43.27.png2776Ă—1402 443 KB

Screenshot 2023-11-22 at 16.42.21.png
Screenshot 2023-11-22 at 16.42.21.png2748Ă—1518 709 KB

3 Likes
2

Hello @MPerera

I’m Vian from FoxEcom. Nice to e-meet you today :slightly_smiling_face:

I’m not sure I understand what you mean (we’re talking about the blue banner with PETA logo right?). You say it’s too thick but you want to draw much more attention to it?

So do you want to make it thinner, or thicker?

3

Hi @MPerera

Do you mean this banner?

Made4uoRibe_0-1700671600760.png
Made4uoRibe_0-1700671600760.png1889Ă—503 159 KB

if it is check this one.

  • rom your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 749px){
div#Banner-template--14923215798320__4e3db4e3-86d3-4e98-accd-dbeb8fce8d34 {
    width: 90%;
    margin: auto;
}
}
  • And save.
  • Note: You can also decrease/increase the size of the width.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Yes, sorry, I wrote this in a rush. I would like to make the blue banner thinner as it is very prominent. I would like to draw less attention to it :sweat_smile:

5

Yes, I would like the blue banner to be thinner. I will try this out and let you know how it worked. Thank you

6

It made it shorter not thinner :sweat_smile:

Screenshot 2023-11-22 at 20.03.44.png
Screenshot 2023-11-22 at 20.03.44.png2880Ă—542 146 KB

1 Like
7

Also I am using dawn 7.0.1

8

Oh, thats made me confuse. You said in the title width and the post thick. Check this one then.

Same Instruction.

@media screen and (min-width: 749px) and (max-width: 1500px){
#Banner-template--14923215798320__4e3db4e3-86d3-4e98-accd-dbeb8fce8d34 > div.banner__media.media {
    height: 70%;
}
#Banner-template--14923215798320__4e3db4e3-86d3-4e98-accd-dbeb8fce8d34 > div.banner__media.media > img {
    object-fit: fill;
}
}

And save.

Result:

Made4uoRibe_0-1700684796314.png
Made4uoRibe_0-1700684796314.png1348Ă—549 498 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
9

Thank you! It worked. I used 80% instead of 70%

But the results are exactly what I wanted. Thank you

1 Like
10

Yep,welcome. You can change anytime the sizes you prefer.