@hyrongennike
Posted
Hi,
The screenshot is correct, you have css rules that are overwriting each other that result in things looking like in the screenshot. remove all the below css rules from the media query.
@media only screen and (min-width: 1370px)
.box4 {
/* height: 38%; */
}
@media only screen and (min-width: 1370px)
.box4 {
/* position: absolute; */
/* top: 285px; */
/* left: 0px; */
/* width: 48.9%; */
}
.box1 {
/* align-self: flex-start; */
}
Also add a max-width: 1440px on the .container. hope this helps, let me know if you have any other question.
@AtulKumar0001
Posted
@hyrongennike Hey
Thanks for the suggestions. I did as you said, but it is still the same. Nothing changed.
@media only screen and (min-width: 1370px) .box4 { /* height: 38%; */ }
@media only screen and (min-width: 1370px) .box4 { /* position: absolute; / / top: 285px; / / left: 0px; / / width: 48.9%; */ }
.box1 { /* align-self: flex-start; */ }
These media queries I am using them to make the left side two boxes of equal size and height. If I remove them, they become unequal.
