Shopify Question posted in
The Shopify help center can be found here.

CSS: Is it possible to break out of a container while keeping the layout – Shopify

I am coding a page which is supposed to be fullscreen on mobile. It will be displayed in a shopify store which has margins on the left and right. I want to remove these without touching the container of my html. Is this possible?

I have tried to change the position to absolute but this collapsed my footer.

Here is the width of the container:

    width: calc(100% - 40px);
Tags:

2

Answers


  1. 0

    CSS supports negative margins, if I’m reading your question correctly you have a parent container with margins and a child container you would like to reach outside the parent container. Something like this should work:

    .parent {
   margin-left: 1em;
   margin-right: 1em;
}
.child {
   margin-left: -1em;
   margin-right: -1em;
}

    Then change your negative margins to match those of the parent margins and you should be able to break out of the parent without changing the parent container.

    Login or Signup to reply.
  2. 0

    After researching the Turbo Theme by OutOfTheSandbox and inspecting the code of their demo, I found that adding the class container full-width--true should work:

        <div class="container full-width--true"> 
        // My full-width container 
    </div>

    This sets the container width to 100%, thus taking the full width of the viewport.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search