Site logo

Archived topic

image hover height 100%

13 replies · Started by Jusung on January 29, 2023

Viewing posts 1–14 of 14

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?

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..

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

This archived topic is closed to new replies.