MaruniakS MaruniakS - 7 months ago 24
HTML Question

Different display of font size in bootstrap cols

I have a portfolio page. If portfolio image is present, the row should be devided into two parts. If not - portfolio description in one line. There are three such rows on my page. Some of them can be with image and some not. At the large screen all is good, but at the mobile or ipad the font size of div's without image (

col-*-12
) is much more bigger than in
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;
}
}


How can I make all this div's to look with the same font size? (They have the same size, but look differently)

Answer

I added this to my page head and that works good.

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