Проблемы с адаптивным дизайном css

body {
   margin:0;
   padding:0;
   box-sizing:border-box;
}

.about-title {
    background-color: #fc0321;
    color:#ffffff;
    padding: 5px;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 400;
    text-align: center;
    border-radius: 100px;
}

@media only screen and (max-width:400px) {
    .about {
        width:100%;
    }
}

<div class = "about">
  <h3 class = "about-title">Welcome to Mahasakthi Harvester Spares</h3>
  <p style = "font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
  <a href = "#" class = "about-button">Read More...</a>
</div>

В приведенном выше коде я пытался создать адаптивный дизайн, но не понял. Я назвал ширину 87% для экранов рабочего стола, а затем изменил ширину на 100% для меньших экранов. Но ширина не меняется. У меня проблемы с этим.

Я упомянул ширину 87% для экранов рабочего стола. -> где? в коде ничего нет

— 27.10.2018 17:24

html css

27.10.2018 17:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .about-title {
      background-color: #fc0321;
      color: #ffffff;
      padding: 5px;
      font-family: 'PT Sans Narrow', sans-serif;
      font-weight: 400;
      text-align: center;
      border-radius: 100px;
    }
      //--------------
    .about {
       width: 87%
       }
     //--------------
    @media only screen and (max-width:400px) {
      .about {
        width: 100%;
      }
    }
  </style>
</head>

Вы не указали значение ширины по умолчанию в своем коде

Я упомянул в коде ширину по умолчанию. но это не сработало. Я забыл упомянуть здесь в вопросе.

— 27.10.2018 18:26

27.10.2018 18:04

Вот пример, который @AFF сделал во фрагменте. Как видите, он работает. Если у вас все еще есть проблемы, вероятно, существует конфликтующий CSS, который переопределяет ваш CSS. Пожалуйста, попробуйте воспроизвести проблему, которая у вас возникла, во фрагменте, используя width:85% для ширины рабочего стола, чтобы мы могли помочь с вашей конкретной проблемой.

Если этот рабочий пример поможет решить вашу проблему, примите ответ @AFF.

body {
   margin:0;
   padding:0;
   box-sizing:border-box;
}

.about-title {
    background-color: #fc0321;
    color:#ffffff;
    padding: 5px;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 400;
    text-align: center;
    border-radius: 100px;
}

.about {
 width:85%;
}

@media only screen and (max-width:400px) {
    .about {
        width:100%;
    }
}

<div class = "about">
  <h3 class = "about-title">Welcome to Mahasakthi Harvester Spares</h3>
  <p style = "font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
  <a href = "#" class = "about-button">Read More...</a>
</div>

28.10.2018 00:02

Другие вопросы по теме

Как изменить цвет текста ввода, если он пустой, отправить с помощью php и javascript?

Изменить цвет фона при наведении курсора и цветовой ссылке

Как предоставить дочернему элементу полную ширину документа, если ширина его контейнера меньше ширины области просмотра

Mozilla firefox с использованием "@media screen и (-webkit-min-device-pixel-ratio: 0)"

Фильтр / поиск и отображение только значков

Анимация сворачивания Bootstrap во внутренних раскрывающихся списках

Url () в SCSS некорректно разрешается с Webpack 4

Почему слайдеры Javascript нарушают мой гибкий макет css?

Почему я получаю разные цвета в разных браузерах, используя одно и то же шестнадцатеричное значение?

Выровняйте поля ввода и текстовое поле с метками по вертикали

Проблемы с адаптивным дизайном css

Ответы 2

Другие вопросы по теме

Похожие вопросы