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

Home Forums Support Child div ignore parent div to go full wide

  • This topic has 7 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1413593
    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,

    #1413759
    David
    Staff
    Customer Support

    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 🙂

    #1413784
    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.

    #1414161
    Tom
    Lead Developer
    Lead Developer

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

    #1415479
    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.

    #1415883
    David
    Staff
    Customer 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>s

    #1416912
    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.

    #1417415
    David
    Staff
    Customer Support

    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.