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
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
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.
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
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.