How can I make a multicolumn section overlay with an image banner?

[SantosBaez]

Hey there!

I’m trying to get the multicolumn section to overlap/overlay with the image banner.

This is how it currently looks.

This is how I would like it to look.

I edited the code for the multicolumn section to zoom in when the cursor hovers over the product card. I would like to keep this effect. I would also like the product card to have round edges like in the screenshot above and a slight shadow.

https://coffeeinboxes.com/

Password: canaveral10

Any help with this is appreciated!

Thank you!

[LitCommerce]

Hi @SantosBaez ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
#shopify-section-template--17436260401457__96efd2cd-3ed7-474d-9112-11c54a98a0d5 {
    margin-top: -150px;
    z-index: 5;
    position: relative;
    padding-bottom: 100px;
}
#shopify-section-template--17436260401457__96efd2cd-3ed7-474d-9112-11c54a98a0d5 .multicolumn.background-none .multicolumn-card{
        background: #fff !important;
    border-radius: 15px;
    overflow: hidden;
}
}

Hope it helps!

[GemPages]

Hello @SantosBaez

I would like to give you a solution to support you.

You can try adding the below code by following these steps:

1. Go to Online Store → Theme → Edit code https://prnt.sc/fJOF9RnL7Rp5

2. Open your theme.liquid theme file

3. Paste the below code before

Code only applies on desktop (> 750px)

I hope my solution can work and support for you.

Best regards,
GemPages Support Team

[BSS-Commerce]

Hi @SantosBaez

Please follow these steps:

• Step 1: At Shopify Admin, Select Online Store → Themes → Edit Code:

• Step 2: Find and open the theme.css file (or base.css), then add this code at the end of the file:

@media screen and (min-width: 750px){
  #shopify-section-template--17436260401457__96efd2cd-3ed7-474d-9112-11c54a98a0d5 {
    position: relative;
    z-index: 10;
    margin-top: -100px;
    padding-bottom: 50px;
  }

  #shopify-section-template--17436260401457__96efd2cd-3ed7-474d-9112-11c54a98a0d5 .multicolumn-list__item {
    background-color: #fff;
    border-radius: 12px;
    padding-top: 14px;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
  }
}

I hope that the product card design suits your requirements. The result will look like this:

[SantosBaez]

Hi BSS-Commerce,

This code worked! However, could you help me fix the product cards to show behind the sticky header? When I scroll down and then up, the product cards show on top of the header. See attached screenshot.

Thanks!

[SantosBaez]

Hi BSS-Commerce,

This code worked! However, could you help me fix the product cards to show behind the sticky header? When I scroll down and then up, the product cards show on top of the header. See attached screenshot.

Thanks!

[SantosBaez]

Hello!

Thanks for the reply. I tried your code, but it did not work for me.

This is where I pasted the code:

[BSS-Commerce]

Hi @SantosBaez

To fix that problem you can modify the code to the following:

@media screen and (min-width: 750px){
  #shopify-section-template--17436260401457__96efd2cd-3ed7-474d-9112-11c54a98a0d5 {
    position: relative;
    z-index: 2;
    margin-top: -100px;
    padding-bottom: 50px;
  }

  #shopify-section-template--17436260401457__96efd2cd-3ed7-474d-9112-11c54a98a0d5 .multicolumn-list__item {
    background-color: #fff;
    border-radius: 12px;
    padding-top: 14px;
    box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
  }
}

I hope that it will work for you.