@elaineleung
Posted
Hi Yewande, I think what you can try is to use grid for the desktop view, but before setting that up, I would change the max-height: 100vh
on your body selector to min-height:100vh
; personally I probably wouldn't use max-height
anywhere on this site and would just remove them all. I also suggest not using the position absolute for the logo, as that would prevent it from being movable in relation to the rest of the containers.
In your code, try adding these lines first:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
flex: 1;
background-size: cover;
// remove max-width and margin
}
.huddle {
// remove position:absolute
text-align: left;
}
I see that you have a max-width
on the img
right now; that can be changed to something bigger in the desktop view when you write your media query, which along with using display:grid
for the layout would look something like this:
@media (min-width: 980px) {
.container {
display:grid;
grid-template-areas:
"huddle huddle"
"image text";
gap: 1rem;
}
.main-image {
grid-area: image;
}
.main-image img {
max-width: 600px;
}
.huddle {
grid-area: huddle;
}
.text {
grid-area: text;
}
}
I suggest experimenting a bit more with flexbox and grid, and you may discover that you won't need to use things like max-width
and position:absolute
for positioning layouts like this one.
Good luck!
Marked as helpful