[Resolved] Custom grid style which overlaps images?

Home Forums Support [Resolved] Custom grid style which overlaps images?

Home Forums Support Custom grid style which overlaps images?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1568246
    Ema

    Hello GP!

    Hope you are all safe and well.

    I’m wondering if a can make a wee grid (3-images only) that overlaps images with Generate Press?
    I’m making one at the moment with absolute positioning, but the client wants to be able to update this themselves, so I think my method is a bit tricky.

    Ema

    #1568362
    David
    Staff
    Customer Support

    Hi there,

    do you have an example or image mockup of what you’re trying to achieve?

    #1603834
    Ema

    Hi David! I got lost in the Matrix with this Question.
    Happy New Year

    I have this code:Which I am going to repurpose for my design. I wonder where is best to put this?
    Do I Create a HTML block add the HTML – then pop the CSS in the ‘Customise – Advanced CSS’. Is CSS grid a recommended method?

    <p>CSS Grid Method</p>

    <p>Text can go down here yabba dabba do</p>

    // Non relevant styles
    * {
    box-sizing: border-box;
    }

    p {
    font-size: 20px;
    font-family: sans-serif;
    color: #6439a9;
    }

    .container {
    padding: 100px 30px;
    width: 100%;
    margin: 0 auto;
    max-width: 900px;
    }

    // Relevant styles
    .image-stack {
    display: grid;
    position: relative; // imperative for the overlapping to work
    grid-template-columns: repeat(12, 1fr);
    }

    .image-stack__item–bottom {
    grid-column: 4 / -1;
    grid-row: 1;
    }

    .image-stack__item–top {
    grid-row: 1;
    grid-column: 1 / span 8;
    padding-top: 20%; // slightly arbitrary, keeps proportion once resized
    z-index: 1; // tells the browser to make this image on top
    }

    img {
    width: 100%;
    display: block;
    }

    #1603836
    David
    Staff
    Customer Support

    Happy New Year!

    Do you have a mockup of what you’re trying to achieve as this may be doable without resorting to HTML and CSS.

    #1603842
    Ema

    Hi David, thank you for such a swift reply.

    2021 is my year to come away from Elementor – so I am currently using Gutenberg and Generate Blocks to rebuild a site a built with the Elementor :-O

    Here you go

    overlapping images
    very best Ema

    #1603854
    David
    Staff
    Customer Support

    Ok – if you have a Container Block ( top image ) followed by a 2 Container Grid Block. Select the left handside Grid Container ( one containing the emblem / text ) and set the Top Margin to a negative value eg. -100px, and set the bottom margin to a the same positive value eg. 100px

    This will drag the container over the container above it.

    #1603856
    Ema

    Ahh I see – I shall try this now David. I’m wondering if this would transfer down on mobile ok. That’s the tricky bit ๐Ÿ™‚

    Very best Ema

    #1603868
    David
    Staff
    Customer Support

    Each of the Blocks has Tablet and Mobile settings, by selecting the relevant tab in the settings side panel. You can set the margin to 0 so they don’t inherit the Desktop margins.

    #1603874
    Ema

    Fantastic David. I shall get back to you with my progress. Thank you so much for your help.

    Ema

    #1603883
    David
    Staff
    Customer Support

    You’re welcome – glad to hear you making the change to GenerateBlocks ๐Ÿ™‚

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