How to squeeze the block with position: absolute to the bottom of another block?

Hello!

5e99f0200dc2f671423823.jpeg

The lower part of the block with text and a section lifted up by putting
position: absolute;
lifted using a
margin-top: -182px;

set the indentation
padding-left: 40px;
padding-left: 40px;
padding-right: 33px;
padding-bottom: 35px;

added background substrate
background: linear-gradient(-180deg,rgba(0,0,0,0.00) 0%,#000000 100%);
border-radius: 8px;

and that section was on top not bottom (for some reason they swapped), used
flex-direction: column-reverse;

But there is a problem, any card title in 1 row, some two, three
in General, margin-top: -182px; not the same

How to fix it? https://astrakhan.pro/video - the link to the page
how to make that part of the block with text and a section completely coincide with the dimensions of the image and did not go beyond it
April 19th 20 at 12:35
2 answers
April 19th 20 at 12:37
Solution
In your code, it's very bad.

And options how to make a flake and absolute here.
Thanks, it turned out, only the date on the header do not align, it turns out that she was equal top padding of the title - Gracie commented on April 19th 20 at 12:40
April 19th 20 at 12:39
Solution
Usually these cards are made without any tricks and much fuss:



Can look at my code to figure out how to do it all. I hope everything is clear enough.
Thanks, already close to the goal, but still somewhere I was wrong(
For more than an hour in agony, thinking he tighten, but apparently without the help any way..

#rec181454003 .t-feed__col grid__post-wrapper .t-feed__post-imgwrapper {
margin-bottom: 15px;
position: relative;
overflow: hidden;
width: 100%;
box-shadow: 0 15px 40px 0 rgba(0,0,0,.2);
border-radius: 8px;
}

The background to the picture failed to attach, left it in the block header and section. Here certainly an error.

#rec181454003 .t-feed__col grid__wrapper {
position: relative;
width: 100%;
background: linear-gradient(-180deg,rgba(0,0,0,0.00) 0%,#000000 100%);
border-radius: 8px;
margin-top: -138px;
padding-top: 50px;
}
}

if you put position: absolute; all slides(

If it is easy, you can see the page code https://astrakhan.pro/video and right there put the correct values and send to me? I would be very grateful... brain is about to explode( although for sure everything is just as usual - Gracie commented on April 19th 20 at 12:42
@Gracie, the complete code of these blocks will be able to put in the sandbox on Codepen? So I could in a sandbox to configure everything. I it will be easier to help you. - Harley_Friesen19 commented on April 19th 20 at 12:45
@Harley_Friesen19it will be too heavy to be probably until I see another day pass)
the site is made with Tilda, I think there are more nuances to the code for the engine, it will probably be easier to open the page and correct the code there, in order not to miss any moments

I understand that the code image
#rec181454003 .t-feed__col grid__post-wrapper .t-feed__post-imgwrapper {
margin-bottom: 15px;
position: relative;
overflow: hidden;
width: 100%;
box-shadow: 0 15px 40px 0 rgba(0,0,0,.2);
border-radius: 8px;
}

.t-feed__col grid__post-wrapper .t-feed__post-bgimg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
}

block with title and sections
#rec181454003 .t-feed__col grid__wrapper {
position: relative;
width: 100%;
background: linear-gradient(-180deg,rgba(0,0,0,0.00) 0%,#000000 100%);
border-radius: 8px;
margin-top: -138px;
padding-top: 50px;
}

but there's a lot more, something he could not ignore

hope will help... - Gracie commented on April 19th 20 at 12:48
@Gracie, Tilda. And then I think why the code is similar to pan's labyrinth. Hmm... well, I see later and as I finish, I'll inform you about the results. Promise I'll try to help. - Harley_Friesen19 commented on April 19th 20 at 12:51
@Harley_Friesen19, any luck?
https://astrakhan.pro/ here is the main code I have another, even more wrong)) when card one row everything is OK, the second row is added and everything shifts.

https://astrakhan.pro/video here what I screwed up on your example

and to make it even easier, here's a page at all without my when the unit is in original condition
https://astrakhan.pro/news - so it will probably be easier to position - Gracie commented on April 19th 20 at 12:54
@Gracie,

1. I spent about an hour to sort it out but came to the conclusion that the code is a real swamp. If you want to have a really good website, then take up the study of frontend and after a certain time can create a normal website. Tilda is despair and hopelessness.

2. I gave you a fully correct and complete code with layout, styles. You have to change classes on their own and fit in the right places, certain classes/ID/or whatever is now using the Tilde to target fill info? It doesn't matter.

3. When you ask questions or write comments, please wrap your code snippets in a special tag. The penultimate icon => Click => In the list choose the language of the text and wrap.

4. Now watch carefully:

5e9b627a71ca7215026952.png

You have the publication wrapped in a link. Why? I showed that it can be inserted into the header. Well, okay, you can throw it in a common block, but why the link to push the entire structure?

As I understand it, you misunderstood me. Take my code, replace the classes, and then paste in the grid block. All. And according to the rules, in fact, the image in the post is an image, not a div with background.

In the end:

In the block with turquoise frame on the screen(it the first) must be card post. Highlighted in yellow must be inside the card. Can set position: absolute;. Highlighted Bordeaux - this is the card post. Hope it is all right explained. But to fully understand your code, don't see the point. I'm here to help solve problems and problems and more give ready solutions that will be better than digging in the source code. So take what I gave you and you will understand how and what to do. - Harley_Friesen19 commented on April 19th 20 at 12:57

Find more questions by tags HTMLCSS