How can I reduce my image banner size on pages?

Store Design
1

For some reason, the smallest image size on Image banner in any Pages are very big, I wanted all the banners to have standard banner size.

This is how the smallest banner size looks like:

Screenshot 2023-07-13 at 11.31.01.png
Screenshot 2023-07-13 at 11.31.01.png2770×1508 684 KB

2

Hello @arutze ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → page-template.liquid

Add a CSS class or ID to the image element within the code. For example:

{% if page.image_banner %}
  
    
  

{% endif %}

Go to Assets folder → base.css file → add this following code at the bottom of page

.image-banner img {
  max-width: 100%;
  height: auto;
}

Save and preview

Hope this can help.

Transcy

3

Hi @Transcy , I don’t have the page-template.liquid section :disappointed_face:
and can you confirm that it will not affect the image banner size on the main page?