Archived topic
Custom grid style which overlaps images?
9 replies · Started by Ema on December 5, 2020
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
Hi there,
do you have an example or image mockup of what you're trying to achieve?
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>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;
}
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.
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
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.
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
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.
Fantastic David. I shall get back to you with my progress. Thank you so much for your help.
Ema
You're welcome - glad to hear you making the change to GenerateBlocks :)
