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 

0 Likes
Natztech
Shopify Partner
2127 545 1298

hello @StudioHS 


you need to design Different banner sizes for mobile and desktop

0 Likes
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

 

0 Likes

@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 section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
0 Likes

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!
0 Likes