Cell overlay in grid

Support
#1

hi there,

so i try to figue out the grid element and the overlay of cells.

i have a 3 columns 2 rows grid. i did look at the grid element: cell placement & overlapping conent video on youtube. i get the idea of how i could overlap the content.

now when i overlap the cells, it is not responsive in that way i want. i tried deifferent values on different views, but the overlapping cell is not in the right position on all screen sizes. (try to make the browser smaller). this is because the image shrinks aswell (first row).
is there a way to “fix/pin” the overlapping cell to that position?

it is the section 3 kernpunkte after the hero image.

thanks in advance for your help

#2

Hey Harald,

You need to edit the Rows Template per screen size. Please watch the video in the secure note.

I’d also recommend watching more Grid tutorials videos in our Youtube Channel as you might pick up more building techniques.

Hope that helps.

#3

hi,

thank you for your answer. i did that allready on xl l and m screens in the grid. but my problem is that the second row is not always in place.
i added a short video in secure note.
i wanna use the grid element, beacuse i can make the s and xs layout with it very easy.

in the video on the top is the grid element (first) and below i made it with the “standard” columns. it should look like the standrad columns section.(second)

thanks again for your help.

#4

Hello Harald,

The second row will always not be in place because it is consists of two rows, row 2 and row 3. If you want to be in place, your rows 2 and 3 should be combined and should be separated. Both the image element, the icon, headline, line and the text elements should be in one column if you want to replicate the first row using the standard columns.

Hope this makes sense.

#5

thanks ruenel for your answer.

(i dont get it with the standard columns. can you make an example?)=got it

what i try to archive is that the grid cell overlay is always in place like the standard columns… but that does not work. when i have a screen width of 1280px the icons are not in place. but with standard columns it is in place.
thanks in advance.

cheers

#6

(ok i tried to replicate that with standard columns. (row4).
i made nested columns and did $el {margin-top: -3.5em!important;} on the second column.
but now on small screens it is side by side… how can i archive that the icon stays in place?) =got it. it works now with standrad columns

but my main goal is to archive that with the grid element. is there a way that the cell below the image stays always in place lake it does with the standrad columns? (look with a screen width of 1280px).

many thanks for your help.

cheers

#7

ok for now i will do it with standrad columns.

thanks again for your help

#8

Hello Harald,

Thanks for updating in! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

We appreciate for letting us know that the you will be using standard columns for now. We highly recommend that you check out our Youtube channel. We have release several tutorial videos how to create unique layout and some tips and tricks in using the grid, rows and column elements.

Please subscribe to our channel for more updates, tips and how to videos:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.