Media query and div issue

Contributor ,
Jul 20, 2021 Jul 20, 2021

Copy link to clipboard

Copied

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?

Views

50

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 21, 2021 Jul 21, 2021

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%;
}

Likes

Translate

Translate
Community Expert ,
Jul 21, 2021 Jul 21, 2021

Copy link to clipboard

Copied

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%;
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 21, 2021 Jul 21, 2021

Copy link to clipboard

Copied

LATEST

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;
}
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines