Spacing between each image with text overlay

[randicamacho]

Hi all!

Please help, I have added these Canva templates to my debut theme that I made as image with text overlay but there is spacing after each image. How do I expand these images to take up the whole space for each one?

Website is https://sun-daes.myshopify.com/

Mahalo

Randi

[malipetek]

Hello there, those images are background images and you have below style applied to them.

I would open up devtools and play around with that property i guess.

It is in the theme.css file.

[malipetek]

Btw you really need to optimize those images, 19mb is a lot. Try adding images as jpeg or webp to canva. Png is basically uncompressed image. You can use this tool to get webp https://squoosh.app/

[PageFly-Richard]

Hi @randicamacho ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

[data-section-type="hero-section"] .page-width {
    max-width: 100%;
    padding: 0;
}
.template-index #shopify-section-hero-1 .hero {
    background-size: 100% !important;
}

I hope it would help you
Best regards,

Richard | PageFly

[randicamacho]

Thank you SO much! So, it fixed the 3rd area but the other 1,2,4,5,6 areas are all the same size still. Is there a way to adjust for those too?

[randicamacho]

Great, I’ll do, thank you so much!

[randicamacho]

Thank you SO much! So, it fixed the 3rd area but the other 1,2,4,5,6 areas are all the same size still. Is there a way to adjust for those too?

[PageFly-Richard]

Hi @randicamacho ,

You can try replace previous my code by below code:

[data-section-type="hero-section"] .page-width {
    max-width: 100%;
    padding: 0;
}
.template-index #shopify-section-hero-1 .hero {
    background-size: 100% !important;
}

[data-section-type="hero-section"] .hero[id] {
    background-size: 100%!important;
    height: 10%;
    width: 100%!important;
    display: block;
}

I hope it would help you
Best regards,

Richard | PageFly

[randicamacho]

Thank you SO much! Yayy it worked!

[randicamacho]

Aloha!

Are we able to also expand this beige color for each area so there are no white spaces after each section? I’ve attached a picture below to show for clarity.

Mahalo!

Randi

[PageFly-Richard]

Hi @randicamacho ,

You can add below code in theme.css file:

.template-index .shopify-section.index-section:not(#shopify-section-collection) {
    background: #efe9e4;
}

I hope it would help you
Best regards,

Richard | PageFly