Mobile promotion banner cut off on Editions Theme

StudioHS
New Member
3 0 0

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. 

Screen Shot 2021-09-18 at 08.33.51.png

My website URL is: here

Thank you 

Replies 4 (4)
Natztech
Shopify Partner
2236 565 1373

hello @StudioHS 


you need to design Different banner sizes for mobile and desktop

StudioHS
New Member
3 0 0

Hi @Natztech 

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

 

Regards

 

diego_ezfy
Shopify Partner
2299 413 539

@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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
LitExtension
Shopify Partner
1952 321 394

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!