/    Sign up×
Community /Pin to ProfileBookmark

CSS: Responsive font-size doesn’t look responsive on Safari browser

Copy linkTweet thisAlerts:
Jun 09.2021

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:
1![1](https://i.stack.imgur.com/MD2Wh.jpg)

And this is the inner menu, also on pc. They are identical:
2![2](https://i.stack.imgur.com/FmQVJ.jpg)

This is what the homepage menu looks like on mobile. (iPhone Safari) This is the expected result:
3![3](https://i.stack.imgur.com/JyUkW.jpg)

However my content pages’ menu looks like this and it’s not user friendly:
4![4](https://i.stack.imgur.com/WhXxH.jpg)

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;
} `

How can I solve this problem?
Thank you in advance.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@omotovhJun 10.2021 — Your problem is that your font size is 80%. 80% of what? I guess it's the 80% of the browser default. Browser default fonts vary from browser to browser and phone to phone. Use rem or em instead or use media queries and set a fixed font in pixels
Copy linkTweet thisAlerts:
@rumeysaglgauthorJun 10.2021 — @omotovh#1632758 **80% of the browser default** — This is what I meant to do. The homepage menu looks pretty fine but the inner one doesn't. Both pages viewed on the **same browser of the same phone** and have the same font size. I tried vw and em before but they didn't work either. Media queries might be a solution, I will try. Thank you.
Copy linkTweet thisAlerts:
@SempervivumJun 10.2021 — Add this to the head section and check if it helps:

`<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">`
Copy linkTweet thisAlerts:
@rumeysaglgauthorJun 10.2021 — @Sempervivum#1632767 It does!!! Thank you so much!

Edit: Oh my god, I just realized it was already in my homepage html code so that's why it was working properly but others was not. My bad, I'm still learning lol.
×

Success!

Help @rumeysaglg spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...