hi there,
when i was checking the page on 550px i see that the image is not covering all div. so i added .rightColumn {
background-size: cover; }
under @media screen and (min-width: 470px) and (max-width: 1140px)
upi can also add
.rightColumn
height:40%;
anyway please check the code below this is a really quick fix for you to understand media rule. Overall is a good job but you have to have a good understanding for media rules.
https://www.w3schools.com/cssref/css3_pr_mediaquery.php
@media screen and (max-width: 470px) {
.data {
flex-direction: row;
}
.content {
height: 70%;
}
.rightColumn {
background-size: cover;
height:50%
}
}
@media screen and (min-width: 780px) {
.data {
flex-direction: row;
}
.content {
height: 50%;
border:1px solid red;
}
.rightColumn {
background-size: cover;
height:100%;
}
}
@media screen and (min-width: 1140px) {
.data {
flex-direction: row;
}
.content {
height: 40%;
border:1px solid blue;
}
.rightColumn {
background-size: cover;
height:100%;
}
}
pay attention to the .rightColumn class in the media rules for each device screen sizes.
for the backgroudn image please use below
background-image: url('../images/image-header-desktop.jpg');
that works !!
It is kinda late here and these are my humble opinions for you. ;) good luck.
also
