Dawn theme: Adjusting background colors in tile

[guisemen]

On the following page, can you help me make the first tile below match the background color and width of the second tile?  I'd also like to get rid of the solid blue background behind the product, if possible.

Thank you thank you thank you in advance for your help!!!

[Dan-From-Ryviu]

Hi @guisemen 

Please share your store URL 

[guisemen]

Apologies -- here you are!

https://guisemen.com/products/green-stick

[ZenoPageBuilder]

Hello @guisemen 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding {
    padding: 0;
    margin: 0;
    max-width: initial;
}

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .media {
    background-color: transparent;
}

The result

Hope it helps!

[guisemen]

Amazing!  Got it!  The only issue here is that the font in that tile now moves ALL the way to the left of the page.

Is there a way to preserve the spacing of that tile while filling in the background like you did?

[ZenoPageBuilder]

You can append this code below the above code

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__grid {
    max-width: var(--page-width);
    margin: auto;
}

[David_SHT]

Hi @guisemen ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> base.css file.

Add this following code at the bottom of page.

.image-with-text.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding {
     --color-card-hover: var(--color-base-solid-button-labels);
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-background);
    --alpha-badge-border: 1;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-1);
    --gradient-background: var(--gradient-base-accent-1);
   max-width: unset;
    background: rgb(var(--color-background));
    background: var(--gradient-background);
    background-attachment: fixed;
}

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding.image-with-text__content,
.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__media {
 background: unset;
}

result:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[guisemen]

Hey there,

That actually provides a slightly different result once pasted into base.css (text is spaced all the way to the left and the left side of the tile is filled in a solid blue color)

[David_SHT · Accepted solution]

There may be a little confusion, please add this code again for me:

.image-with-text.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding {
     --color-card-hover: var(--color-base-solid-button-labels);
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-background);
    --alpha-badge-border: 1;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-1);
    --gradient-background: var(--gradient-base-accent-1);
   max-width: unset;
    background: rgb(var(--color-background));
    background: var(--gradient-background);
    background-attachment: fixed;
}

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__content,
.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__media {
 background: unset;
}

[guisemen]

Fixed!  Thanks, David.  If you have advice on how to align the text to match the other box, I'd appreciate it, but I'm marking this as the correct solution.