Turbo theme: Is it possible to remove space on specific pages?

Solved
Tourist
6 0 1

 Hi Shopify-Community,

 

I am using the Turbo them in my shop and I have one page with HTML I wrote myself. The problem is, there are pictures that are supposed to fill the screen yet they don't, because the content is not allowed to leave the main content div, which is not fullscreen. 

Now, is there a way to change the margins on the left and right only on one page?

 

Thank you for helping!

0 Likes

Success.

Shopify Partner
2495 13 462

Hi there,

many themes assign some class on container elements, which controls the maximum width. Turbo has this

 

.container {
    position: relative;
    max-width: 1200px;       /* limit the width of the element */
    margin: 0 auto;          /* centre it on the page          */
}

So you may remove this class from the parent element and assign it to children (except the one you want full-bleed) if you decide to change HTML.

 

 

If your element is an immediate child of the container,  you may use CSS to override this max-width rule with something like this added to the bottom of your stylesheet, but you need to research how to properly target you particular container:

 

.product-template .container {
    max-width: none;                          /* no limit on container in product section      */
}
.product-template .container > * {            /* limit width of its immediate children instead */
    max-width: 1200px;    
margin: 0 auto; /* make theme centred on page */ } .product-template .container > .my_element { /* except for my element */ max-width: none; }

 

 

Alternatively, there is a trick to "break out" of container using negative margin for your element:

 

.my_element {
    width:  100vw;                     /* make your element same width as the window/screen */ 
    margin-left: calc( 50% - 50vw );   /* and shift to the left */
}

The parent of you element must be centred on the page for this to work properly (but it usually is, like the .container above).

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Tourist
6 0 1

Hey tim,

 

Thank you for your fast response! I have tried the first solution but I couldn't find the class of the container. I tried inspecting the element but it didn't help. The second solution seemed easier but if didn't do the job 100%. It shifted my content to the left (which is good) but now there is a gap on the right side. Do you have any idea on how to solve this?

 

Thank you!

0 Likes
Shopify Partner
2495 13 462

Well, it would be nice to see a preview link then. Other CSS rules or HTML structure may affect this.



 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Tourist
6 0 1

Here is a link to the page: https://marmeladecat.com/pages/waehle-dein-geraet-test

You might have to downsize your window, this page is only optimized for mobile right now.

0 Likes
Highlighted
Shopify Partner
2495 13 462

That's because you have in your liquid 

.bildbox {
    width: 100%;
    height: 300px;
    overflow: hidden;
    text-align: center;
  }

which is located lower than your stylesheet and overrides the width from my rule.

Now, you've tried to comment it with html comment -- <!-- ...> --but it does not work inside the <style> .. </style> block.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Tourist
6 0 1

Thank you very much! It worked!!

0 Likes