Reputation: 133
Trying to find an answer to why chrome on mobile phone shows the same code differently than desktop chrome (and firefox, edge, opera). The <a>
text has a different position in <div>
container.
PS. Ive marked "BOOKS" on the screenshots to make it more visual. On desktop view <a>
is in the middle, on mobile - to the top.
desktop:
mobile:
HTML:
<div class="topbar" id="tb-grad">
<a class="logomain" id="lm-shad">BOOKS & DVD</a>
<a></a>
<a></a>
</div>
CSS:
.topbar {
max-width: 600px;
font-size: 40px;margin: auto;
border-radius: 10px;}
.logomain {
font-family: 'Luckiest Guy', cursive;
font-size: 40px;
color: yellow;}
Upvotes: 0
Views: 393
Reputation: 36
I went through the exact same problem and after many tests and missed hours found that fonts change in Chrome Mobile X Chrome Desktop.
I know i may have arrived late, but if anyone experiences this problem try switching the font used for another. A good place to find fonts for this test may be the Google Fonts site.
Test some sources for you to observe this behavior.
Upvotes: 2
Reputation: 95
If you wish, you can control the highlight colors using the following:
::selection {
background:#BBD3FD;
}
::-moz-selection {
background:#BBD3FD;
}
This will ensure that the background color of the highlighted segment is the same across all devices.
#BBD3FD
is the pale blue that Google Docs uses for its highlight background.
Upvotes: 1