возникли проблемы с отзывчивым дизайном CSS - PullRequest
Новая
       1

возникли проблемы с отзывчивым дизайном CSS

0 голосов
/ 27 октября 2018 

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% для экранов меньшего размера. Но ширина не меняется. У меня проблемы с этим.

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Вот пример, который @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>
0 голосов
/ 27 октября 2018 
<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>

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...