Solved

Reduce image size / banner

isabellemaria
Trailblazer
197 1 25

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 

Accepted Solutions (2)
GTLOfficial
Shopify Expert
135 27 45

This is an 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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

GTLOfficial
Shopify Expert
135 27 45

This is an 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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

View solution in original post

Replies 6 (6)

PageFly-Amelia
Shopify Partner
452 144 206

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

isabellemaria
Trailblazer
197 1 25

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
Shopify Expert
135 27 45

This is an 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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
isabellemaria
Trailblazer
197 1 25

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
Shopify Expert
135 27 45

This is an 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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
isabellemaria
Trailblazer
197 1 25

Amazing, thank you so much!