.masthead { padding: 3em 3em; background-color: #0D1B2E; color: white; /*float:left;*/ margin: 0 auto; max-width: 550px; margin-right: 0px; } .masthead h1 { text-align: center; } .intro { padding: 2em 2em; color: #ffffff; background: #429890; /*float:right;*/ margin: 0 auto; max-width: 550px; margin-left: 0px; } .intro p { margin: 0 auto; max-width: 550px; } @media (min-device-width: 992px) and (max-device-width: 1199px) { .masthead { padding: 3em 3em; background-color: #0D1B2E; color: white; /*float:left;*/ margin: 0 auto; max-width: 550px; margin-bottom: 15px; } .intro { padding: 2em 2em; color: #ffffff; background: #429890; /*float:right;*/ margin: 0 auto; max-width: 550px; } } 
 <div class="masthead"> <h1 class="header-type">Test Your Typing Speed</h1> </div> <article class="intro"> <p class="type">This is a typing test. Your goal is to duplicate the provided text, EXACTLY, in the field below. The timer starts when you start typing, and only stops when you match this text exactly. Good Luck!</p> </article> <!-- .intro -->

The question is probably a stupid one, but I’m fighting it not for the first day. Created a layout, made media requests - when checking for them, the layout behaves adequately. However, if I just change the browser window (I also tried to match the size of media queries, the same story), then some blocks behave incorrectly. What is the reason that I do not take into account? If necessary, I can lay out the code, but I feel that I am missing some basic thing.

  • one
    Attach an example of what is wrong and under what conditions - Nilsan
  • You have a number of media queries. Each media query is triggered at a certain screen resolution. What is the difficulty of writing styles for displaying a separate block when displayed on a specific screen? - Kyper
  • @Kyper I did it, when checking through the adaptive layout of Chrome, everything is OK, when you reduce the browser window, the structure breaks. - Mikhail Ladonkin
  • @MikhailLadonkin Need to see your layout - Kyper
  • You are missing only ONE basic thing - you didn’t put the code on ... Well, the layout is definitely clumsy, I’ve never encountered this behavior in YOUR layout ... - Sergey V.

0