Floating / Overlapping Elements

Hi everyone, I'm trying to figure out the bet way to bring the attached design to life and I'm lost as to where to start. I've circled in red the section in question. I love how the boxes overlap the two sections, so I would like to keep that. I can do without the icons. Any help to point me in the right direction would be greatly appreciated. 

I see a floating block here, but a form and styled differently https://www.flyjetblak.com/

I would suggest that the easiest way to set this up is like this; have a background image and the section set to fill, use a shape block (yellow outlined) stretched to the left right and bottom of the section, use text blocks with background enabled for the info (blue outlined), and overlap the icons as image blocks (if you want those):

@Ziggy @tuanphan

I have the same question for my homepage: https://evamauermann.com (Password: Help) in the Blog Section.

Right now it looks like this:

But I would like it to look like here:

So move the coloured shape block + text block upwards, that they overlap my slideshow header photo.

I tried the "overlaping technique" I used on other sections, with adding a new section in between but I couldn't figure out a way because of the photo (because it's not a solid background).

Thanks!

You can use this to Website Tools > Custom CSS

.fe-block-yui_3_17_2_1_1727349873408_1406, .fe-block-yui_3_17_2_1_1727299826731_21805 {
    position: relative;
    top: -100px;
}

On 9/29/2024 at 12:50 PM, tuanphan said:

You can use this to Website Tools > Custom CSS

.fe-block-yui_3_17_2_1_1727349873408_1406, .fe-block-yui_3_17_2_1_1727299826731_21805 {
    position: relative;
    top: -100px;
}

 

This worked great on Desktop, thanks! 🙂

But on mobile it doesn't look right 😞

And is there further the possibility to reduce the spacing between the coloured shape and the following Blog articles (please see photo below)?

On 10/1/2024 at 5:14 AM, Journalfloral said:

This worked great on Desktop, thanks! 🙂

But on mobile it doesn't look right 😞

 

And is there further the possibility to reduce the spacing between the coloured shape and the following Blog articles (please see photo below)?

 

What should it look like on mobile?

With space, you can use this CSS code

@media screen and (min-width:768px) {
section[data-section-id="66e3fc126a641b3e5796ac63"] {
    min-height: unset !important;
    height: 10vh;
}
}

On 10/3/2024 at 12:20 PM, tuanphan said:

What should it look like on mobile?

 

Right now it looks on mobile like this:

I would like to have it look like this:

But when I go into edit mode, the coloured shape block disappears?

So I can't just push the text blocks higher above the shape block.

You can remove the code & move it up on mobile, with desktop I will give code

Because when use code to move up on mobile, it will create a space (initial space occupied by the elements), to remove this space will need to adjust the code of all elements below, it will need a lot of code

13 hours ago, tuanphan said:

You can remove the code & move it up on mobile, with desktop I will give code

Because when use code to move up on mobile, it will create a space (initial space occupied by the elements), to remove this space will need to adjust the code of all elements below, it will need a lot of code

So I removed the last part of the code and now I only use this:
/* Blog Übersicht Überlappen Header */
.fe-block-yui_3_17_2_1_1727349873408_1406, .fe-block-yui_3_17_2_1_1727299826731_21805 {
    position: relative;
    top: -100px;}
 

On mobile I was now able to move the text block above the shape block 🙂

And for desktop I now need another code, to close again the gap between the coloured shape block and the following blog posts (as we already discussed above) 🙂

Can you change current section to Classic Section? I tried but can't solve this 100%

@media screen and (min-width:768px) {
.fe-66e3fc12e0077b041d3d9301 {
    --row-height-scaling-factor: 0;
grid-template-rows: repeat(2,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

.fe-block.fe-block-yui_3_17_2_1_1727349873408_1406 {
    grid-row-end: 16;
}

section[data-section-id="66e3fc126a641b3e5796ac63"] {
    min-height: unset !important;
    height: 25vh;
}}

3 hours ago, tuanphan said:

Can you change current section to Classic Section? I tried but can't solve this 100%

@media screen and (min-width:768px) {
.fe-66e3fc12e0077b041d3d9301 {
    --row-height-scaling-factor: 0;
grid-template-rows: repeat(2,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important;
}

.fe-block.fe-block-yui_3_17_2_1_1727349873408_1406 {
    grid-row-end: 16;
}

section[data-section-id="66e3fc126a641b3e5796ac63"] {
    min-height: unset !important;
    height: 25vh;
}}

 

What do you mean with "change current section to Classic Section"?  🤔