У меня есть div, который отлично смотрится на обычном рабочем столе. Однако, если это ноутбук или меньший размер, его потребуется немного настроить. 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, чтобы текст выглядел немного более нормальным? Спасибо всем заранее.

-1
BJsgoodlife 26 Сен 2018 в 06:08

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>
1
Gerard 26 Сен 2018 в 05:54

Попробуйте это 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;}
}
0
user6144292 26 Сен 2018 в 06:09