Mobile promotion banner cut off on Editions Theme

[StudioHS]

Hi there

I am having difficulties with one promotion banner in my website. It looks fine on the website but it cut offs completely on mobile view. I've tried the coding solution suggested in other discussion however it still won't work. Attach is how the banner looks like on website view. 

. 

My website URL is: here

Thank you 

[Kinjaldavra]

hello @StudioHS 

you need to design Different banner sizes for mobile and desktop

[StudioHS]

Hi @Kinjaldavra 

May I know how do i do that? I am only allowed to upload one photos 

Regards

[diego_ezfy]

@StudioHS 

It's a bit difficult to offer a solution with this particular section's code structure. The best you can do in this case is something like this, but it still will affect readability:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

@media (max-width: 749px){
    .promotion-block--content-overflow .promotion-block__image img{
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: -20px !important;
}

.promotion-block--content-overflow{

    margin-bottom: -40px !important;
}
}

Adding custom sections like this that allows you to upload one image for desktop and another for mobile can come in handy too, this way you can make an image exclusively for mobile devices. Though the code above should be enough to solve your problem.

Kind regards,
Diego

[LitExtension]

Hi @StudioHS,

Please follow these steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:

@media screen and (max-width: 959px){
.promotion-block--content-overflow{
height: auto;
}
.promotion-block--content-overflow .promotion-block__image img{
position: relative;
width: 100%;
height: auto;
}
}

Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.