Image with text overlay - Debut theme - grey film on image

Solved
Jchap
New Member
4 0 0

I created a custom image in Canva and it looks great on Desktop - but is cut off in mobile.  When I render it on mobile - the logo and the surfer is cut off.  When I change the Section height from "medium" to "Adapt to image" it renders properly on mobile and on desktop from a size perspective - but it's got a grey "film" on the image - it's no longer crisp white.  Are you able to help?  www.muskokamud.com.  Thank you!

0 Likes
hash777
Shopify Partner
164 9 23

@Jchap Hi there, you need to make 2 different dimension images. one for desktop and one for mobile. same image but with wide width , I mean in potrait and ladscape both modes. THANKYOU

0 Likes
Jchap
New Member
4 0 0

Thanks so much for the quick reply @hash777.  I'm really new to this and am still not 100% sure what to do.  There is only room for one image upload... I'm not sure how to make an image both portrait and landscape at the same time in Canva.  I do have photoshop so I'm sure I could work with it there... but am actually just not sure what to do!  thank you.

0 Likes
LitExtension
Shopify Partner
1228 156 217

This is an accepted solution.

Hi @Jchap

Please follow the 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:

.hero-fixed-width::before{

        background: none !important;

        opacity: 0 !important;

}

LitExtension - 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
Jchap
New Member
4 0 0

That worked!!  Amazing!  Thanks so much!!!

0 Likes