Media query and div issue

Forum|Forum|4 years ago
July 21, 2021
1 reply
348 views

Hello

The 4 images seen at the website are centered and are arranged in 1 row and will collapse to 3, 2, 1 column as the screen size width is resized. http://davidswebsite.com/test/center_images_div.html

Question 1: As the screen width is reduced past 768px, the green body background color will show up above the orange container.
How to fix this so it does not?

Question 2: I expand the webpage width past 1150px, the H1 title will aligned with the images. I want the images below the H1 title. Same as when the width is smaller.
How to fix that?

This topic has been closed for replies.

Correct answer B i r n o u

Question 1:

it is just because when running below 768, the class .container loose it's display as flex... so place this property outside of the media query... why not on the root .container

as

.container {
   display:flex;
}

Question 2:

to avoid the wraping of the H1 give to the H1 selector a basis of 100% as

h1 {
  flex-basis:100%;
}

B i r n o uCorrect answer

Legend

Question 1:

it is just because when running below 768, the class .container loose it's display as flex... so place this property outside of the media query... why not on the root .container

as

.container {
   display:flex;
}

Question 2:

to avoid the wraping of the H1 give to the H1 selector a basis of 100% as

h1 {
  flex-basis:100%;
}

davidhelpAuthor

Inspiring

Thanks, it is now looking correct.

I removed the margin for H1 and added padding instead.

I have these media queries.

@media screen and (min-width: 481px) {
h1 {
font-size: 300%;
}
}

@media (min-width: 480px) {
.boxwrapper {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded