Solved

How to overlap content on an image banner

Fin_W
New Member
5 0 0

IMG_5616.jpg

 

Hi all, 

 

How do I change the banner image section so that the content overlaps the image on mobile? The below is the stock version. 

 

Thanks in advance!

 

Screenshot 2024-03-17 at 19.26.32.png

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1818 513 388

This is an accepted solution.

Oh!

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

 

<style>
@media only screen and (max-width: 989px) {
    .section-template--18719282954504__01751048-2491-475a-a440-3f1e91386a7e-padding.gradient.color-scheme-e62a7a9a-7b6a-48a9-8263-29095730c0fe > div,
    .section-template--18719282954504__5605021f-01c0-4229-9894-e9338431c45e-padding.gradient.color-background-1 > div{
        padding: 0 !important;
    }
    
    .section-template--18719282954504__01751048-2491-475a-a440-3f1e91386a7e-padding.gradient.color-scheme-e62a7a9a-7b6a-48a9-8263-29095730c0fe > div img, 
    .section-template--18719282954504__01751048-2491-475a-a440-3f1e91386a7e-padding.gradient.color-scheme-e62a7a9a-7b6a-48a9-8263-29095730c0fe > div .image-with-text__media,
    .section-template--18719282954504__5605021f-01c0-4229-9894-e9338431c45e-padding.gradient.color-background-1 > div img,
    .section-template--18719282954504__5605021f-01c0-4229-9894-e9338431c45e-padding.gradient.color-background-1 > div .image-with-text__media {
        border-radius: 0 !important;
    }
    
    .section-template--18719282954504__01751048-2491-475a-a440-3f1e91386a7e-padding.gradient.color-scheme-e62a7a9a-7b6a-48a9-8263-29095730c0fe,
    .section-template--18719282954504__5605021f-01c0-4229-9894-e9338431c45e-padding.gradient.color-background-1 {
        padding-top: 0 !important;
    }    
}
</style>

 

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710780977378.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
1818 513 388

Hey @Fin_W,

 

Can you share the link to your store please, and password (if any)? Thanks! 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Fin_W
New Member
5 0 0

Sure - Squigglyy.com 

ThePrimeWeb
Shopify Partner
1818 513 388

It's already overlapping here. Are you working on a different theme that you want to achieve this on? If so, please share the preview link to that theme. I am asking for the link to the store because I want to write the code for the specific theme you want this feature on.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Fin_W
New Member
5 0 0

Yes it's overlapping but the image is not full width as show in the pink store. Ideally this would be the case

ThePrimeWeb
Shopify Partner
1818 513 388

This is an accepted solution.

Oh!

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

 

<style>
@media only screen and (max-width: 989px) {
    .section-template--18719282954504__01751048-2491-475a-a440-3f1e91386a7e-padding.gradient.color-scheme-e62a7a9a-7b6a-48a9-8263-29095730c0fe > div,
    .section-template--18719282954504__5605021f-01c0-4229-9894-e9338431c45e-padding.gradient.color-background-1 > div{
        padding: 0 !important;
    }
    
    .section-template--18719282954504__01751048-2491-475a-a440-3f1e91386a7e-padding.gradient.color-scheme-e62a7a9a-7b6a-48a9-8263-29095730c0fe > div img, 
    .section-template--18719282954504__01751048-2491-475a-a440-3f1e91386a7e-padding.gradient.color-scheme-e62a7a9a-7b6a-48a9-8263-29095730c0fe > div .image-with-text__media,
    .section-template--18719282954504__5605021f-01c0-4229-9894-e9338431c45e-padding.gradient.color-background-1 > div img,
    .section-template--18719282954504__5605021f-01c0-4229-9894-e9338431c45e-padding.gradient.color-background-1 > div .image-with-text__media {
        border-radius: 0 !important;
    }
    
    .section-template--18719282954504__01751048-2491-475a-a440-3f1e91386a7e-padding.gradient.color-scheme-e62a7a9a-7b6a-48a9-8263-29095730c0fe,
    .section-template--18719282954504__5605021f-01c0-4229-9894-e9338431c45e-padding.gradient.color-background-1 {
        padding-top: 0 !important;
    }    
}
</style>

 

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710780977378.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Fin_W
New Member
5 0 0

Screenshot 2024-03-18 at 21.24.18.pngScreenshot 2024-03-18 at 21.22.52.png

 

Really really appreciate the replies! I tried the code and didn't notice a difference, the image is still not full width. Do you know what it could be? 

ThePrimeWeb
Shopify Partner
1818 513 388

Are you working on a draft theme? Because when I visit the store, I don't see the code pasted anywhere? 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Fin_W
New Member
5 0 0

Oh damn it's worked! I clicked on format liquid button and it solved! Possibly a mistake I made on my end, really appreciate you! 😎