CODEWITHSUNDEEP
htmlcss
bartc
bartc

Reputation: 133

chrome mobile VS chrome desktop: different position of the same element

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:

desktop

mobile:

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

Answers (2)

Peteffi
Peteffi

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

deadweig-ht
deadweig-ht

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

Related Questions