How can I make an image full width in the info tabs section on Shopify plus?

Store Design
, , ,
1

Hi there,

I am using the ‘combine theme’ on shopify plus.

I am wishing to make the image full width on the info tabs section (so not have the gap on the left side of the section in the screenshot). It is an SVG image how do I go about changing this?

Screenshot 2024-02-21 at 9.34.17 AM.png
Screenshot 2024-02-21 at 9.34.17 AM.png5062×2126 567 KB

Thank you,

Milla

2

Hi @millakindred

Would you mind to share the preview? Thanks!

3

Hi there, here is the preview link. Thanks

https://maskco.com/?_ab=0&_fd=0&_sc=1

4

Im sorry, im still not seeing the section that you like to edit. Is this a product page? or a Image with text section?

5

Hi @Made4uo-Ribe - apologies sent the wrong link

https://maskco.com/?_ab=0&_fd=0&_sc=1

6

I guess it’s a section like this one: https://moodiostudio.com/#shopify-section-template–15705531908301__166266065378da2b75

You may try CSS code like this:

@media (min-width:768px) {
  .info-tabs {
    margin-left: calc(50% - 50vw);
  }
  
  .info-tabs_panels {
    width: 50vw;
  }
}

tim_0-1708488677353.png
tim_0-1708488677353.png2026×1415 229 KB

However:

The code above would apply to all sections of this type, so may require better targeting;

Should work when images are on the left (because margin-left);

Also wanted to warn that there are people with large and ultra-wide monitors where full-blown things like this may not look pretty, but it’s hard to suggest anything without seeing the actual image:

tim_2-1708489012996.png
tim_2-1708489012996.png1730×1659 321 KB

7

Hi @tim_1 thanks for the above!

I was wondering how I make this full width also on mobile?

8

For this we need to add another @media rule to the code above so that it looks like this:

@media (min-width:768px) {
  .info-tabs {
    margin-left: calc(50% - 50vw);
  }
  
  .info-tabs_panels {
    width: 50vw;
  }
}

@media (max-width:767px) {
 .info-tabs_panels {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}