Answer the question
In order to leave comments, you need to log in
Are there special style rules for Retina?
Hello
, I have a block that looks adequate in both Mozilla and Chrome on a FullHD screen. When I look at it on a poppy with Retina, then some kind of indentation appears on the right. Why?
The code:
.info {
//background: url("../img/contcts.png") no-repeat scroll;
width: 24.2%;
display: block;
background: $black;
position: relative;
flex: 1 1 0;
margin-right: 10px;
}
<div class="info f_left">
<div class="info-wrap">
<h3 class="f_left">Украина</h3>
<p class="f_left">ул. Артема, 80
</p>
<a href="mailto:">
<p class="f_left">mail</p>
</a>
<a href="tel:+">
<span class="f_left telephone">+38 </span>
</a>
</div>
</div>
Answer the question
In order to leave comments, you need to log in
When rendered by browsers, all calculated sizes are rounded to fit the browser's pixel grid. On the retina, the pixel grid is 2 times smaller, so the rounding will be a little more accurate, too precise in your case.
There may be problems in size: width: 24.2%;
and its rounding after the browser recalculates the percentages into pixels, but it is impossible to answer more precisely, since the result or at least a screenshot is not visible.
In any case, here's a useful read on the subject: A Designer's Guide to DPI
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question