Reduce image size / banner

[isabellemaria]

Hi there!

How can I reduce the size of the "Unsere Mission" image on this page for DESKTOP only? Using Dawn theme.

https://taneraskin.com/pages/about 

Best regards,

Isabelle 

[GTLOfficial · Accepted solution]

hello @isabellemaria 
use this css  in your CSS file "section-image-banner.css " It will make the banner centre

.banner.banner--content-align-center {
    margin: 0 auto;
}

Please let me know if it works I will help you

Thanks

[PageFly-Amelia]

Hello @isabellemaria 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

.banner {
   width: 90% !important;
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[isabellemaria]

Hi Amelia,

It is smaller but the image is at the left side of the page now. How can I canter it too?

Thanks for your help!

Best,

Isabelle

[GTLOfficial · Accepted solution]

hello @isabellemaria 
use this css  in your CSS file "section-image-banner.css " It will make the banner centre

.banner.banner--content-align-center {
    margin: 0 auto;
}

Please let me know if it works I will help you

Thanks

[isabellemaria]

This works, however in the mobile version the image looks way too big. What code do I need to add to make it just as big as the maximum mobile screen size?

Thanks for your help!

[GTLOfficial · Accepted solution]

okay no problem use this code 

go to the CSS file "section-image-banner.css " and find lines numbers 55 to 59 you will see this code below

  .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 28rem;
   /* CHANGE */
  }

 and change this code to this one

  .banner--small.banner--mobile-bottom:not(.banner--adapt) .banner__media,
  .banner--small.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt) > .banner__media {
    height: 10rem;
   /* CHANGE */
  }

PLease let me know

[isabellemaria]

Amazing, thank you so much!