- This topic has 7 replies, 3 voices, and was last updated 1 month ago by David.
August 22, 2020 at 2:40 am #1413593Matthew
I have an image gallery in a div that’s within the
articlediv 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,August 22, 2020 at 7:03 am #1413759DavidStaffCustomer Support
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
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 🙂August 22, 2020 at 7:19 am #1413784Matthew
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
articleetc.August 22, 2020 at 12:26 pm #1414161TomLead DeveloperLead DeveloperAugust 23, 2020 at 10:15 pm #1415479Matthew
Hi Tom yep, the gallery code is added in the template.
Wide gallery: (i.e. mock-up using
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
articlediv. As are most of the other divs in my overall template layout.August 24, 2020 at 5:17 am #1415883DavidStaffCustomer Support
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>sAugust 24, 2020 at 9:18 pm #1416912Matthew
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.August 25, 2020 at 7:06 am #1417415DavidStaffCustomer Support
Ok so thoughts are this.
1. Currently the
#pagecontainer 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-parentclasses 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-containerclass from an element to make it full width or contained.
- You must be logged in to reply to this topic.