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;}
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.
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.
Related
I'm building a responsive personal website and I've encountered a weird problem. I created a menu for my website. Since its homepage and content pages have different CSS files, I put the same menu code into both CSSs. It works and looks same on my pc browsers (Firefox and Chrome) but when it comes to mobile browser the font-size changes even if they are same in the code.
This is what the homepage menu looks like on pc browser:
And this is the inner menu, also on pc. They are identical:
This is what the homepage menu looks like on mobile. (iPhone Safari) This is the expected result:
However my content pages' menu looks like this and it's not user friendly:
As far as I tested I believe the problem occurs on Safari. I also tried Mobile Firefox Browser and it looked decent. I don't have a clue about Android browsers though.
By the way this is the menu list styling code part of my two CSS files. Entire code is in vw or %
.menu-pane li {
padding-top: 1.8vw;
padding-bottom: 0.1vw;
margin-left: 1vw;
font-size: 80%;
font-family: 'Josefin Sans', sans-serif;
}
Use this code on your CSS file
html{
-webkit-text-size-adjust: 100%;
}
I am having trouble rendering Poppins on my site the way it renders on Google fonts demo site.
When using a non-retina display it renders "too thin", for example, the bars on the T are only 1px high, instead of 1.5px high when I look at the same text on font.google.com.
I like the way it looks on Google fonts much better. On my site the font looks "chopped" at the top but I cannot figure out what they are doing in their HTML to get a different rendering.
This codepen demonstrates the issue but beware: you need a non-retina display to see the issue!
Code:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet" />
</head>
<style>
body {
margin: 48px;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 18px;
}
main {
display: grid;
grid-template-columns: 20% 30% 40%;
column-gap: 5%;
align-items: center;
}
h2 {
font-size: 1.2em;
font-weight: normal;
align-self: center;
}
a {
color: #000;
}
small {
display: block;
font-weight: normal;
font-size: 12px;
}
img:first-of-type {
grid-row-end: span 2;
}
</style>
<body>
<h1>⚠️This issue is only visible on non-retina display!</h1>
<main>
<h2>
Browser rendering
</h2>
<div>
TITLE TEXT HERE IS 18<br />
<small>^^^ T bars will be too thin on non-retina browser</small>
</div>
<img src="https://i.imgur.com/7LyzjJy.png" />
<h2>
Screenshot of Chrome on MacOS (broken)
</h2>
<div>
<img src="https://i.imgur.com/2OZ0wv6.png" />
<small>^^^ Notice how the T bar is too thin.</small>
</div>
<h2>
Google Fonts<br />
(screenshot of Bold 700 on <a href="https://fonts.google.com/specimen/Poppins?preview.text=HTML+TITLE+TEXT+HERE+IS+18&preview.text_type=custom&selection.family=Poppins:wght#400;700&sidebar.open">
the demo page</a>)
</h2>
<div>
<img src="https://i.imgur.com/dgld0Jw.png" /><br />
<small>^^^ Notice how the T bars are thicker</small>
</div>
<img src="https://i.imgur.com/pQPZ6Ch.png" />
</main>
</body>
</html>
I see your point,
it seems that there are some issues with the latest version of this font, others have complained too.
now why it is rendered okay on google? it could be that the demo version google script is using isn't the same as the one on their fonts CDN though I'm not sure
Solution:
until they fix the issue, Use Webfont
same font same CSS as the one in your pen
except this is an older version, you can host it on your own server
using something like webfont (I believe you know how to do that but in case you don't)
fontsquirrel makes the proceedure dead simple.
BTW this is on a mac and a separate HD screen
Note:
I noticed a tiny bit of spacing between the letters/words but nothing that
can't be fixed with some CSS letter-spacing or word-spacing
First thing - since macOS Mojave, Apple has disabled font smoothing by default. This is hard to notice on Retina Displays, but easy to notice on non-Retina. Executing defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO and logging out mostly fixes the problem. Without font smoothing text look a bit smaller.
The second problem seems to be in the way Google Fonts are working. When you type the preview text on Google Fonts demo page you are loading only characters you need for this given text - this is to save bandwidth as you are going to download about 18 styles of it.
However the font seems to be just a little bit different.
Google Fonts embed
Poppins downloaded from Google Fonts, imported manually via #font-face
Font constructed by Google Fonts downloaded from the network page on developer tools
1 and 2 look identical. The difference in 3 is almost unnoticeable, except for letter T and E.
Please also note that on Google Fonts demo page text is rendered with -webkit-font-smoothing: antialiased; which usually makes the text seem a bit smaller, maybe this is why the generated font is a bit bigger.
This can be noticed if you have Poppins cached and change the font manually from generated one to real Poppins.
This is my take on this problem, but on the way to it, I also found that sometimes subpixel rendering was present.
I am having a page in which heading and drop-down both are inline but that page looks different in Chrome and Firefox even though HTML and CSS classes are same, there is no specific css or style used for a specific browser.
heading is not in center in chrome , but in Firefox heading is in the center and drop-down is in right without any space.
Following CSS
.h2 {
padding: 9px 7px;
margin: 0;
color: #2b6dd1;
background-color: #FFFFFF;
font-weight: 600;
font-size: 22px;
text-align: center;
margin-left: 25% !important;
}
I wants heading in center and drop down in right in both the browsers chrome as well as Firefox.
Please remember the I used searchable drop-down .
They are diferent web navigators so they dont read the code the same way, you must add some prefixes to make your code readable for all of them.
-webkit //chrome
-moz- //firefox
-o- //Opera
-mz- //Internet Explorer
The most common web navigator is google chrome, because it works better and has more functionalities (I´ve worked with Chrome and Edge and I recommend Chrome).
I leave you a link here to a web where u can learn more about this
I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.
My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787