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

MT27
Pathfinder
148 6 10

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_0-1712505477123.png

 

 

Replies 4 (4)
MT27
Pathfinder
148 6 10

dawn

PageFly-Noah
Shopify Partner
1251 221 254

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

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.

MT27
Pathfinder
148 6 10

didnt work..

PageFly-Noah
Shopify Partner
1251 221 254

 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.

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.