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

[millakindred]

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?

Thank you,

Milla

[Made4uo-Ribe]

Hi @millakindred 

Would you mind to share the preview? Thanks!

[millakindred]

Hi there, here is the preview link. Thanks

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

[Made4uo-Ribe]

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

[millakindred]

Hi @Made4uo-Ribe - apologies sent the wrong link

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

[tim · Accepted solution]

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;
  }
}

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:

[millakindred]

Hi @tim thanks for the above! 

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

[tim]

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);
  }
}