Как исправить css / html для контента при переходе экрана с полного на меньший экран?

Question

У меня проблема с моими css и HTML, когда дело касается изменения размера страницы.

В настоящее время он отлично работает, когда работает в полноэкранном режиме (ноутбук или полноэкранный мобильный телефон). То, что происходит, - это то, что два вопроса появляются бок о бок в полноэкранном режиме, а в мобильном - один за другим.

Единственная проблема, которая у меня возникает, - это то, что между этапами. Если вы посмотрите на предоставленное изображение, вы увидите, что оно выглядит неправильно. Я надеюсь, что это второй вопрос go вместо первого вопроса, пока я перехожу с полного экрана на мобильный, как я уже говорил, этого не произойдет, пока ширина экрана не станет намного меньше.

Мой вопрос просто как это исправить?

.quesalignleft {
  float: left;
}

.quesalignright {
  float: right;
}

.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (min-width: 1024px) {
  .wrap,
  header nav,
  footer nav {
    width: 95%;
  }
}

<section class="slideInRight" id="slide=59">
  <div class="wrap">
    <h4 style="text-align: center; padding-bottom: 1em;">Lesson 5: Intro Into Automation - Practice Questions 1</h4>
    <div class="quesalignleft size-45">
      <p><strong>1: Which of the following is Gherkin syntax is correct?
                  </strong></p>
      <ol class="answerslist">
        <li>Given… When… And… Then…</li>
        <li>Given… When… Then… Then…</li>
        <li>When… Then… Given… When… Then…</li>
        <li>When… And… When… Then… And…</li>
      </ol>
    </div>
    <div class="quesalignright size-45 secondquestion">
      <p><strong>2: The code that performs all the interactions are stored within where in Page Object Model?</strong></p>
      <ol class="answerslist">
        <li>Features</li>
        <li>Steps</li>
        <li>Methods</li>
        <li>Elements</li>
      </ol>
    </div>
  </div>
</section>

Answer 1

Проблема здесь в том, что вы используете float, ваш .quesalignright делает именно то, что вы говорите, он плавает справа , что означает, что он позиционирует себя на .wrap справа и, если на оси x недостаточно места, под другим плавающим содержимым (ваш первый вопрос в данном случае).

Могу я предложить: используйте float: left по всем вопросам и используйте max-width: 50% на больших экранах, чтобы ваши вопросы отображались рядом друг с другом, если хотите.

.quesalignleft {
  float: left;
}

.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (min-width: 1024px) {
  .wrap,
  header nav,
  footer nav {
    width: 95%;
  }
  
  .quesalignleft {
    max-width: 50%;
  }
}

<section class="slideInRight" id="slide=59">
  <div class="wrap">
    <h4 style="text-align: center; padding-bottom: 1em;">Lesson 5: Intro Into Automation - Practice Questions 1</h4>
    <div class="quesalignleft size-45">
      <p><strong>1: Which of the following is Gherkin syntax is correct?
                  </strong></p>
      <ol class="answerslist">
        <li>Given… When… And… Then…</li>
        <li>Given… When… Then… Then…</li>
        <li>When… Then… Given… When… Then…</li>
        <li>When… And… When… Then… And…</li>
      </ol>
    </div>
    <div class="quesalignleft size-45 secondquestion">
      <p><strong>2: The code that performs all the interactions are stored within where in Page Object Model?</strong></p>
      <ol class="answerslist">
        <li>Features</li>
        <li>Steps</li>
        <li>Methods</li>
        <li>Elements</li>
      </ol>
    </div>
  </div>
</section>

Answer 2

@media (max-width: 1024px) {
    .wrap,
    header nav,
    footer nav {
        width: 95%;
    }
    .quesalignright {
        float: left;
    }
}

Измените следующий код вместо min-width: вы должны написать max-width и float: left code, как показано выше

Answer 3

Использование float с медиа-запросом (вы кодируете)

.quesalignleft {
  float: left;
}

.quesalignright {
  float: right;
}

.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (max-width: 767px) {
 .quesalignright {
  float: left;
}
}

<section class="slideInRight" id="slide=59">
  <div class="wrap">
    <h4 style="text-align: center; padding-bottom: 1em;">Lesson 5: Intro Into Automation - Practice Questions 1</h4>
    <div class="quesalignleft size-45">
      <p><strong>1: Which of the following is Gherkin syntax is correct?
                  </strong></p>
      <ol class="answerslist">
        <li>Given… When… And… Then…</li>
        <li>Given… When… Then… Then…</li>
        <li>When… Then… Given… When… Then…</li>
        <li>When… And… When… Then… And…</li>
      </ol>
    </div>
    <div class="quesalignright size-45 secondquestion">
      <p><strong>2: The code that performs all the interactions are stored within where in Page Object Model?</strong></p>
      <ol class="answerslist">
        <li>Features</li>
        <li>Steps</li>
        <li>Methods</li>
        <li>Elements</li>
      </ol>
    </div>
  </div>
</section>

Использование flex с медиазапросом

.quesalignleft {
  width: 100%;
}

.quesalignright {
  width: 100%;
}
.box {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 768px) {
.box {
    display: block;
}
}
.wrap,
header nav,
footer nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

@media (min-width: 1024px) {
  .wrap,
  header nav,
  footer nav {
    width: 95%;
  }
}

<section class="slideInRight" id="slide=59">
  <div class="wrap">
    <h4 style="text-align: center; padding-bottom: 1em;">Lesson 5: Intro Into Automation - Practice Questions 1</h4>
    <div class="box">
    <div class="quesalignleft size-45">
      <p><strong>1: Which of the following is Gherkin syntax is correct?
                  </strong></p>
      <ol class="answerslist">
        <li>Given… When… And… Then…</li>
        <li>Given… When… Then… Then…</li>
        <li>When… Then… Given… When… Then…</li>
        <li>When… And… When… Then… And…</li>
      </ol>
    </div>
    <div class="quesalignright size-45 secondquestion">
      <p><strong>2: The code that performs all the interactions are stored within where in Page Object Model?</strong></p>
      <ol class="answerslist">
        <li>Features</li>
        <li>Steps</li>
        <li>Methods</li>
        <li>Elements</li>
      </ol>
    </div>
  </div></div>
</section>