How can I resize a mobile photo to have black space around it?

[MT27]

Hi, can you help me make this  photo on the mobile smaller (like the red line) so there is black space vertically and horizontally but with the full photo showing

Pass: biangu

Url: www.matibrnd.com

[MT27]

dawn

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

To make smaller image you can add code here:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
@media screen (max-width: 767px){
   .banner.banner--content-align-center.banner--content-align-mobile-center.banner--medium .banner--adapt.banner--mobile-bottom{
       display: flex !important;
       justify-content: center !important;

     }
   .banner.banner--content-align-center .banner__media{
       width: 80vw !important;
   }
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[MT27]

didnt work..

[PageFly-Noah]

 Hi @MT27  Iam sorry for delay. I wrote 1 extra character, please try this code again:

<style>
@media screen (max-width: 767px){
   . banne.banner--content-align-center{
       display: flex !important;
       justify-content: center !important;

     }
   .banner .banner__media{
       width: 80vw !important;
   }
}
</style>

Thank you so much.