Edit margins of a specific image to make it flush to edge

[hannahdossary]

Hey everyone,

I’m struggling to figure out how to make an image touch the edge of a page with no margin (so it looks like its coming off the page). Can anyone help??

The staging site is: https://b197k3jxftwgsix6-57555910835.shopifypreview.com

When I view through ‘Inspect’, it looks like there’s a margin-left on both the section and container. (screenshots below).

But i’m not sure how i can edit the margins of these without affecting ALL sections and containers?

Is there a way I can add a specific block code to specify its only this image margin I want to adjust?

Thanks so much!!! I’ve been wracking my brains trying to figure this one out!!

Hannah

[AvadaCommerce]

Hi @hannahdossary ,

To change you follow the instruction:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

#shopify-section-template--15352099340467__164008924381af3d47 .container {
    padding-left: 0 !important;
}
#shopify-section-template--15352099340467__164008924381af3d47 .container .image-with-text__image-wrapper {
    margin-left: 0 !important;
}
@media (min-width: 1600px) {
    #shopify-section-template--15352099340467__164008924381af3d47 .container .image-with-text__wrapper {
        margin-left: calc((1600px - 100vw) / 2) !important;
    }
}
@media (max-width: 1000px) {
    #shopify-section-template--15352099340467__164008924381af3d47 image-with-text {
        padding-left: 0;
        padding-right: 0;
    }
}

I hope it would help you.

[hannahdossary]

Amazing thank you so much for solving that so quick!! You are a star!!

Now i can see what you’ve done, it makes so much sense with including the section id and .container etc! Hopefully I’ll be able to replicate for any future customisations.

Just out of curiosity, what do these 2 lines of code do

@media (min-width: 1600px) {
    #shopify-section-template--15352099340467__164008924381af3d47 .container .image-with-text__wrapper {
        margin-left: calc((1600px - 100vw) / 2) !important;
    }
}
@media (max-width: 1000px) {
    #shopify-section-template--15352099340467__164008924381af3d47 image-with-text {
        padding-left: 0;
        padding-right: 0;
    }
}

Thanks again!!

[AvadaCommerce]

Hi @hannahdossary ,

This is code to responsive conform devices.

[hannahdossary]

Thank you!!