Greetings.
Hoping someone can help me out here. I have built my first plain HTML, CSS and JS site in VS Code and Pinegrow and deployed it on Netlify. On the local server, everything looks fine. But on the live site, there is a responsive design issue.
If you look at the screenshot of the deployed Netlify site at the mobile breakpoint, It’s not showing correctly.
In the “Netlify - deployed - Mobile” screenshot, the “Visa Services” list and the “Ask 1 to 3 Questions” sections have their fonts sizes reduced. Both the <p>s and the <li>s are set to the same font size and should be the same font-size as the rest of the site. Unfortunately, I don’t know how to use dev tools on my mobile phone, but for some reason the sizes only on those two sections, show up smaller while on the local host, the font-size is uniform across the site.
Any help would be greatly appreciated because I don’t know where else to look. Thanks. (Though it’s probably some little thing right in front of me!)
Hi Nathan, Thanks for getting back to me. Yes, I’m using clamp for font-sizes, but both the
and the
tags are using the --text-l (as in L) variable. So why the difference in size between the
tag from one section to another, and why are the
and the
tags not the same everywhere? I wish I could use dev tools on my phone to really check what’s happening. I haven’t figured how to do that yet. Of course I’m writing to make sure it’s not something on Netlify’s side.
@Ray-de-light Sorry I thought you were confused as to why the fonts were reduced in size at all.
I couldn’t find the “Ask 1 to 3 Questions” sections last time I looked, but I now believe you probably mean the button at the top of the page.
So if you’re talking about the Ask 1 to 3 Questions blue button, as far as I can see that’s not actually got font-size: var( --text-l ), it’s an <a> not a <p>, and it’s not in a <p>.
Adding --text-l to it directly results in it becoming the same computed size as the other items you’re referencing.
Actually I’m not talking about the buttons, but I am talking about those 2 cards. You can see on both cards there is a list
and above it there is a
. Both have the “–text-l” CSS variable. Then, right above the two cards there are two more paragraphs under the heading, “Choose Only the Service You Need”. Those paragraphs also have the same CSS variable, but note that they are a completely different size. Why? That’s what I want to know. Is it Netlify, or something I’ve inadvertently done wrong? I appreciate the help,in any case. Thanks
In combination with the instructions you’re giving, it’s effectively making me waste my time.
Instead of responding via email, please come back to the Netlify forum directly and provide a response that contains a screenshot showing exactly what you’re referring to.
Remember, as I said the problem does not affect the desktop view, only mobile, and only on the deployed site on Netlify, not on my local server.
Thanks again.
It might be something you could debug using a tool like Browser Stack, which would help you determine the circumstances it’s occurring under, and to then confirm any fixes.
I tried to locate the missing PDF files, but could not find any reference to pdf in the source of the page, nor find a button/link pointing to one.
Yes, you screenshot looks correct. Is that Android or iOS? I just tested it on my daughter’s Android phone and it looks like yours. I also tested in on 4 different browsers on my phone and I get different errors in each one. So maybe my reset CSS has some problems. Well, there’s a lot to learn. Any suggestions of resources to test all of that?
Well, Nathan. I think I figured it out. After stumbling at the price of Browserstack, I did some more searching and came up with a tip from StackOverflow. They suggested If the site looks good on one cell phone and not another, it could be caching. So I booted my mobile browser into incognito mode to check – and the site works perfectly. I guess it’s time to clear the cache! Ha ha. Thanks for the help.
