[Support request] Child div ignore parent div to go full wide

[Matthew]

I have an image gallery in a div that’s within the article div of the template for media attachments.

Have looked for some solutions with CSS, JS etc which allow this div to stretch to full screen width i.e. forcing (gallery) child div wider than the parent div. None seem very good so far. The idea is to allow users to see a very wide gallery when there are many images, reducing vertical scrolling.

If I set position: absolute; left: 0; right: 0; it works but it causes the underlying HTML elements to ignore it and overlap. If they could be cleared would that be a solid method.

Is this a bad idea. Any thoughts or recommendations?

thanks,

[David]

Hi there,

The best method is to set the Page Container to full width.
Then you can created contained content by wrapping them in a grid-container <div class="grid-container">

And any other elements will just fill the full width.

If you’re using the Block editor then our GenerateBlocks plugin will allow you to created Contained and Full Width containers without the need for HTML 🙂

[Matthew]

I get the idea of this, sounds promising.

So given this is a template do I modify the template file directly, or with the customizer or a hook some method? Can it just affect this template and leave the other site areas

The template I have created has the div’s primary, along with main, and article etc.

[Tom]

Are you adding the gallery into the template file itself, or are you using the editor?

[Matthew]

Hi Tom yep, the gallery code is added in the template.

Contained gallery:
https://drive.google.com/file/d/15bTh0EijdVdh-qxNlXe4JmAejtm2aMpL/view?usp=sharing

Wide gallery: (i.e. mock-up using position: absolute)
https://drive.google.com/file/d/1MvG95BPyecFKvP_iD1yqZjTcV8IL8Vsu/view?usp=sharing

Stretching out to full width would be great as you can see in case of many gallery thumbnails. I hope for user to control this feature as well.

The div containing the MLA Gallery is inside the article div. As are most of the other divs in my overall template layout.

[David]

Could you share a link to the page where we can see the Gallery in place.
Maybe a CSS option is simpler… if not it would require stripping the container width from the template – and then wrapping your contained content inside ‘contained’ <div>s

[Matthew]

Thanks David, sent through your account issue form with Hidemysite plug-in password.

To summarise, this will end up being a user toggle feature, i.e. div will be able to be both contained and wide based on (front end) user control.

[David]

Ok so thoughts are this.

1. Currently the #page container is controlling the width using this markup:

<div id="page" class="hfeed site grid-container container grid-parent">

2. You could remove the grid-container grid-parent classes from that element
To make the entire content fullwidth.

3. Then apply the grid-container class to the various containers within your content.

4. for toggle feature you simply would need to add/remove the grid-container class from an element to make it full width or contained.

[Author]

Posts