Различное отображение размера шрифта в bootstrap cols

У меня есть страница портфолио. Если присутствует изображение портфолио, строка должна быть разделена на две части. Если нет-описание портфеля в одной строке. Таких строк на моей странице три. Некоторые из них могут быть с изображением, а некоторые нет. На большом экране все хорошо, но на мобильном или ipad размер шрифта div без изображения ( col-*-12) намного больше, чем в col-*-6.

 <div class="row">
  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
   </div>
   <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">        
   <% if @portfolio.first_picture.present? %>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="portfolio-description">
             <h2 class="row-header"> Project statement</h2>
             <h4 class="p-description"><%= @portfolio.project_statement%></h4>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 portfolio-pic">
            <%= image_tag(@portfolio.first_picture, class: 'portfolio-picture') %>
          </div>
      <% else %>
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 outer-desc">
            <div class="portfolio-description">
             <h2 class="row-header"> Project statement</h2>
             <h4 class="p-description"><%= @portfolio.project_statement %></h4>
            </div>
          </div>
      <% end %>
    </div>
@media (min-width: 768px) and (max-width: 991px) {
  .row-header {
     font-size: 1.8em !important;
  }
  .p-description {
     font-size: 1.3em !important;
  }
}

Как я могу сделать все это div, чтобы посмотреть с тем же размером шрифта? (Они имеют одинаковый размер, но выглядят по-разному)

1 ответ

  1. Я добавил Это в мою голову страницы, и это работает хорошо.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" charset="utf-8">