Я пытаюсь адаптировать созданный мной сайт для просмотра на мобильных устройствах или планшетах. В настоящее время у меня есть три пары «image & aside», где расположение каждого из них меняется с изображения слева на сторону справа, затем на изображение справа и в сторону слева.

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

Ниже приведены соответствующие фрагменты кода. (Пустые места, где изображения появляются.)

.about-text {
  padding: 5% 5% 0 5%;
}

.def-width {
  width: 50%;
}

.table {
  display: table;
}

#experience article {
  float: left;
}

#experience aside {
  float: right;
}

#gas-safe article {
  float: left;
}

#gas-safe aside {
  float: right;
}

#gas-safe a {
  color: #4E6E9B;
  border-bottom: 1px dotted #4E6E9B;
}

#quality article {
  float: left;
}

#quality aside {
  float: right;
}

#to-top {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #4E6E9B;
}

#to-top i {
  font-size: 50px;
  text-align: center;
}

#to-top:hover {
  color: #fff;
}
<div class="alt-color">
  <section class="table" id="experience">
    <article class="def-width">
      <img src="img/boiler-commission-scaled.jpg" class="about-img">
    </article>
    <aside class="about-text def-width">
      <h2>34 Years Experience</h2>
      <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p>
    </aside>

  </section>

  <section class="table" id="gas-safe">

    <article class="about-text def-width">
      <h2>Gas Safe Accredited</h2>
      <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards.
      </p><br>

      <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a>

    </article>
    <aside class="def-width">
      <img src="img/radiator-fitting-scaled.jpg" class="about-img">
    </aside>

  </section>

  <section class="table" id="quality">
    <article class="def-width">
      <img src="img/gas-engineer-scaled.jpg" class="about-img">
    </article>
    <aside class="about-text def-width">
      <h2>Quality. Without Compromise.</h2>
      <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p>
    </aside>
  </section>

  <a id="to-top" href="index.html">
    <i class="fa fa-arrow-circle-up"></i>
  </a>

</div>
0
c.gooderham94 19 Окт 2017 в 12:10

3 ответа

Лучший ответ

Если вы готовы использовать bootstrap для проверки адаптивного дизайна ниже фрагмента кода, которая легко решит вашу проблему без медиазапросы.

.about-text {
  padding: 5% 5% 0 5%;
}

#gas-safe a {
  color: #4E6E9B;
  border-bottom: 1px dotted #4E6E9B;
}   

#to-top {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #4E6E9B;
}

#to-top i {
  font-size: 50px;
  text-align: center;
}

#to-top:hover {
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container alt-color">
  <div class="row">
    <section id="experience">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <article class="def-width">
          <img src="img/boiler-commission-scaled.jpg" class="about-img">
        </article>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <aside class="about-text def-width">
          <h2>34 Years Experience</h2>
          <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p>
        </aside>
      </div>
    </section>
  </div>
  <div class="row">
    <section id="gas-safe">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <article class="about-text def-width">
          <h2>Gas Safe Accredited</h2>
          <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards.
          </p><br>

          <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a>

        </article>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <aside class="def-width">
          <img src="img/radiator-fitting-scaled.jpg" class="about-img">
        </aside>
      </div>

    </section>
  </div>
  <div class="row">
    <section id="quality">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <article class="def-width">
          <img src="img/gas-engineer-scaled.jpg" class="about-img">
        </article>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <aside class="about-text def-width">
          <h2>Quality. Without Compromise.</h2>
          <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p>
        </aside>
      </div>
    </section>
  </div>
  <a id="to-top" href="index.html">
    <i class="fa fa-arrow-circle-up"></i>
  </a>

</div>
0
RaJesh RiJo 19 Окт 2017 в 09:25

Просто добавьте этот медиа-запрос в начало вашего CSS:

@media screen and (max-width: 800px){
  .about-text.def-width {
    width: 100%;
  }
  aside {
    float: left !important;
  }
}
0
alc 19 Окт 2017 в 09:27

Вы можете добиться того, что пытаетесь сделать, используя @media-queries. Мне пришлось немного изменить ваш HTML, потому что картинка во втором ряду пришла после содержимого.

В настоящее время он настроен на переключение макета в 800px, но вы можете изменить это нелегко, изменив значение max-width в CSS.

.about-text {
  padding: 5% 5% 0 5%;
}

.def-width {
  width: 50%;
}

.table {
  display: table;
}

#experience article {
  float: left;
}

#experience aside {
  float: right;
}

#gas-safe article {
  float: left;
}

#gas-safe aside {
  float: right;
}

#gas-safe a {
  color: #4E6E9B;
  border-bottom: 1px dotted #4E6E9B;
}

#quality article {
  float: left;
}

#quality aside {
  float: right;
}

#to-top {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #4E6E9B;
}

#to-top i {
  font-size: 50px;
  text-align: center;
}

#to-top:hover {
  color: #fff;
}

@media (min-width: 800px) {
  .hide-desktop {
display: none;
  }
}

@media (max-width: 800px) {
  .hide-mobile {
display: none;
  }
  #gas-safe article {
float: none;
width: 100%;
text-align: center;
  }
  #experience article,
  .table aside {
float: none !important;
width: 100%;
text-align: center;
  }
  #quality article {
float: none;
width: 100%;
text-align: center;
  }
}
<div class="alt-color">
  <section class="table" id="experience">
<article class="def-width">
  <img src="http://via.placeholder.com/300x200" class="about-img">
</article>
<aside class="about-text def-width">
  <h2>34 Years Experience</h2>
  <p>Wayne is proud to have 34 years of experience in the gas engineering industry after having formerly completed a 3 year apprenticeship with British Gas.</p>
</aside>

  </section>

  <section class="table" id="gas-safe">
<article class="def-width hide-desktop">
  <img src="http://via.placeholder.com/300x200" class="about-img">
</article>
<article class="about-text def-width">
  <h2>Gas Safe Accredited</h2>
  <p>Safety always comes first. That's why we are trained to conform with the latest 'Gas Safe Register' standards.
  </p>
  <br>

  <a href="https://www.gassaferegister.co.uk/find-an-engineer/check-a-business/?id=Wk%2biWbZCWcWz04dI3rDbQA%3d%3d" target="_blank">Check our Gas Safe Registration</a>

</article>
<aside class="def-width hide-mobile">
  <img src="http://via.placeholder.com/300x200" class="about-img">
</aside>

  </section>

  <section class="table" id="quality">
<article class="def-width">

  <img src="http://via.placeholder.com/300x200" class="about-img">
</article>
<aside class="about-text def-width">
  <h2>Quality. Without Compromise.</h2>
  <p>Your central heating system is a big investment. We promise to only use industry leading products and install these with quality in mind; no corner cutting.</p>
</aside>
  </section>

  <a id="to-top" href="index.html">
<i class="fa fa-arrow-circle-up"></i>
  </a>

</div>
0
Fahad Hasan 19 Окт 2017 в 09:33