Можно ли изменить ширину div внутри медиа-запроса в CSS?

Question

У меня есть div, который отлично смотрится на обычном рабочем столе.Однако, когда это ноутбук или меньший размер, он нуждается в некоторой настройке. Вот как это выглядит на рабочем столе.Моя цель - расширить текст.Я хочу, чтобы каждый сегмент был отдельным для небольших устройств.Текст настолько узок, что вы читаете только два или три слова в строке, и это может раздражать читателя.

Вот HTML-код:

  <div id="work" class="full-width">
            <div class="third-width">
                <img src="../img/icon-html.png" alt="HTML icon" />
                <h3>Hand-Coded HTML</h3>
                <p>My focus is writing clean, well formatted, semantic HTML5 by hand to make sure that the content is easy
                    to read, easy to collaborate, trouble-shoot and accessible.</p>
            </div>
            <div class="third-width">
                <img src="../img/icon-css.png" alt="CSS icon" />
                <h3>Well-Organized CSS</h3>
                <p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast
                    to load, and I make it a habit to stay up to date on current best practices.</p>
            </div>
            <div id="code" class="third-width">
                <img src="../img/icon-pencil.png" alt="Pencil icon" />
                <h3>Ease Converting Designs into Code</h3>
                <p>You can trust me to take a designer's PSD and quickly &amp; accurately convert it into a webpage that
                    is pixel-perfect match.</p>
            </div>

        </div>

, и это CSS, которым я пытаюсь манипулировать:

 .third-width .fullwidth {
    display:block; 
    float: none; 



}

На данный момент, когда мне удается отцентрировать еготекст очень узкий, может быть, два или три слова вместе.Я хочу сделать медиа-запрос для класса третьей ширины.Это медиа-запрос:

@media only screen and (min-width: 786px) and (max-width: 1100px) {

.third-width .fullwidth {
    display:block; 
    float: none; 



} } 

Как бы вы расширили div, чтобы текст выглядел немного более нормальным?Спасибо всем заранее.

Answer 1

попробуйте https://jsfiddle.net/xstb5p0r/3/

.third-width{float:left;width:33.33%;padding:0px 5%;text-align:center;}
.full-width{display:flex;width:100%;}
@media only screen and (max-width: 600px) {
  .full-width {
    display:block;
  }
  .third-width{width:100%;float:none;}
}

Answer 2

Ваш CSS-код был неправильным, поэтому он не мог работать.Я думаю, что я верю в то, что вы пытаетесь выполнить, и лучше всего это сделать с помощью flexbox .

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

.full-width {
  display: flex;
  width: 100%;
  background: orange;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
}

.full-width .third-width {
  padding: 100px;
  width: calc( 100% / 3 );
  text-align: center;
}

@media only screen and (min-width: 786px) and (max-width: 1100px) {
  .full-width .third-width {
    padding: 10px;
  }
}

<div id="work" class="full-width">
  <div class="third-width">
    <img src="https://via.placeholder.com/100x100" alt="HTML icon" />
    <h3>Hand-Coded HTML</h3>
    <p>My focus is writing clean, well formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
  </div>
  <div class="third-width">
    <img src="https://via.placeholder.com/100x100" alt="CSS icon" />
    <h3>Well-Organized CSS</h3>
    <p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
  </div>
  <div id="code" class="third-width">
    <img src="https://via.placeholder.com/100x100" alt="Pencil icon" />
    <h3>Ease Converting Designs into Code</h3>
    <p>You can trust me to take a designer's PSD and quickly &amp; accurately convert it into a webpage that is pixel-perfect match.</p>
  </div>
</div>