- This topic has 9 replies, 2 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
December 5, 2020 at 3:48 am #1568246Ema
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
December 5, 2020 at 6:27 am #1568362DavidStaffCustomer SupportHi there,
do you have an example or image mockup of what you’re trying to achieve?
January 3, 2021 at 7:35 am #1603834EmaHi David! I got lost in the Matrix with this Question.
Happy New YearI 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;
}January 3, 2021 at 7:37 am #1603836DavidStaffCustomer SupportHappy 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.
January 3, 2021 at 7:46 am #1603842EmaHi 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 EmaJanuary 3, 2021 at 7:56 am #1603854DavidStaffCustomer SupportOk – 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.
January 3, 2021 at 7:59 am #1603856EmaAhh 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
January 3, 2021 at 8:06 am #1603868DavidStaffCustomer SupportEach 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.January 3, 2021 at 8:14 am #1603874EmaFantastic David. I shall get back to you with my progress. Thank you so much for your help.
Ema
January 3, 2021 at 8:25 am #1603883DavidStaffCustomer SupportYou’re welcome – glad to hear you making the change to GenerateBlocks ๐
-
AuthorPosts
- You must be logged in to reply to this topic.