Skip to main content
davidhelp
Inspiring
July 21, 2021
Answered

Media query and div issue

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

    1 reply

    B i r n o u
    B i r n o uCorrect answer
    Legend
    July 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%;
    }
    davidhelp
    davidhelpAuthor
    Inspiring
    July 21, 2021

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