How to overlap content on an image banner

Fin_W · ‎03-17-2024

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!

ThePrimeWeb · ‎03-18-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-17-2024

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? [email protected] or check out the website
Check out our interview with Shopify!

Fin_W · ‎03-18-2024

Sure - Squigglyy.com

ThePrimeWeb · ‎03-18-2024

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? [email protected] or check out the website
Check out our interview with Shopify!

Fin_W · ‎03-18-2024

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

ThePrimeWeb · ‎03-18-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

Fin_W · ‎03-18-2024

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?