How can I reduce my image banner size on pages?

[arutze]

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:

[Transcy]

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 %}
  <div class="image-banner">
    <img src="{{ page.image_banner | img_url: 'master' }}" alt="{{ page.title }}">
  </div>
{% 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

[arutze]

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