Archived topic
image hover height 100%
13 replies · Started by Jusung on January 29, 2023
When you see this page, on the second container, you can see 4 images and I made hover effect on the image.
When I reduce the window screen, I can see white blank area under the second container.
Is there a way to make the height 100% always?
Hi Jusung,
Can you add the min-height to the Container Block instead, and add the background color there as well? Reference: https://docs.generateblocks.com/article/container-overview/#minimum-height
When I remove the height on the cover, the white blank area is gone.
However, the hover image is not stretched fully.
The hover image is supposed to be streched fully.
I gave the height on the container, but it didn't change anything.
I can't add background color as well. Now I am using color block temporily, but I will add image later.
Also, nothing changes after adding background color..
You can remove the Cover Block, and then set the image size to 100% height reference: https://docs.generateblocks.com/article/image-overview/
We can alter it with CSS afterward if there's something wrong still with that structure.
It works!
but I want to figure one more thing out.
I want to make (First container and second container) 100% height on the screen.
How can I make this?
You can set 100vh min-height value for the Containers. Make sure to change px to vh.
It doesn't seem working.
I gave 70 vh for the first container
and I gave 30 vh for the second container.
So, the total is 100 vh, but it is over the screen..
I can't see the 30vh set for the second Container. Can you try clearing the cache?
You can see
Container 1
container 2 (containerA, containerB, containerC, containerD)
if i give 30 vh to container 2 and 70vh to container 1, it makes white blank under container 2 when the screen is reduced.
when I give 30vh to each containerABCD, it doesn't make 100% of height, but doens't make white blank area.
right now, I give 30 vh to the container 2 and it is making white blank area under container 2.
I see. Can you set it first to 30vh? We'll see what's occurring and assess what needs to be done.
Another thing you can do is place Containers 1 and 2 inside a Parent Container and set that Container to 100vh.
Then that heights of Containers 1 and 2 should be 70% and 30% respectively.
It still doesn't work..
I made a parent container that containes container1 and 2 and give 70vh and 30vh respectively.
It doesn't work. it is always over..
I found the reason.
When I give 70vh and 30vh respectively, it works.
However, when I add image on the container, it is broken..
It seems solved...
I jsut used container instead of image then it works well..
yeah if you use a background image on the container block and set the background size to cover it will always fit