My deployed site has variations on on local server

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!)

Site details:
Repo: GitHub - Ray-de-light/oscar-utopia-FINAL: Website for an attorney in Ecuador
live site:
Attached: screenshots on desktop

Deploy log (Oct 24th):
9:22:15 PM: build-image version: 0c5695ad82eb9b0111196b4ab87e76fc88dfb543 (focal)
9:22:15 PM: buildbot version: 056a3c1eb1da633c99b793460eb6be9ceeb43492
9:22:15 PM: Fetching cached dependencies
9:22:15 PM: Starting to download cache of 32.9MB
9:22:16 PM: Finished downloading cache in 1.485s
9:22:16 PM: Starting to extract cache
9:22:17 PM: Finished extracting cache in 35ms
9:22:17 PM: Finished fetching cache in 1.576s
9:22:17 PM: Starting to prepare the repo for build
9:22:17 PM: Preparing Git Reference refs/heads/main
9:22:18 PM: Starting to install dependencies
9:22:18 PM: Python version set to 3.8
9:22:18 PM: Attempting Ruby version 2.7.2, read from environment
9:22:19 PM: Using Ruby version 2.7.2
9:22:19 PM: Started restoring cached go cache
9:22:19 PM: Finished restoring cached go cache
9:22:19 PM: go version go1.19.13 linux/amd64
9:22:20 PM: Using PHP version 8.0
9:22:21 PM: v18.18.2 is already installed.
9:22:21 PM: Now using node v18.18.2 (npm v9.8.1)
9:22:21 PM: Enabling Node.js Corepack
9:22:21 PM: Started restoring cached build plugins
9:22:21 PM: Finished restoring cached build plugins
9:22:21 PM: Install dependencies script success
9:22:21 PM: No build steps found, continuing to publishing
9:22:21 PM: Starting to deploy site from “/”
9:22:21 PM: Calculating files to upload
9:22:22 PM: Post processing - redirect rules
9:22:22 PM: Post processing done
9:22:22 PM: Section completed: postprocessing
9:22:22 PM: Site is live :sparkles:
9:22:22 PM: Starting post processing
9:22:22 PM: Skipping HTML post processing
9:22:22 PM: Post processing - header rules
9:22:22 PM: 1 new files to upload
9:22:22 PM: 0 new functions to upload
9:22:22 PM: Section completed: deploying
9:22:22 PM: Section completed: building
9:22:22 PM: Uploading Cache of size 32.9MB
9:22:23 PM: Section completed: cleanup
9:22:23 PM: Finished processing build request in 7.823s

@Ray-de-light The font size of the li is specified as:

--text-l is specified as:

See the documentation for clamp:

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

  • Take a look at this pdf

    (Attachment Netlify - deployed - Mobile.pdf is missing)

    You’ve not supplied a PDF:

    Also your messages in general are poorly formatted:

    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.

    Here, I’ve marked up the screenshot to be clearer.There are two problem areas.

    @Ray-de-light There is no screenshot visible.

    Instead of replying via email, where your attachments repeatedly don’t seem to work, and your formatting gets mangled, you should reply by visiting your thread on the Netlify forum:

    OK, I get it - I’ll stop replying to the emails. Anyway, here is a .png that shows the problem. Please take a look. Pdfs don’t seem to work here.

    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.

    @Ray-de-light The font-size issue is unlikely to be Netlify specific, especially as it doesn’t occur for me:

    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?

    @Ray-de-light My suggestion is in my previous message, using Browser Stack will allow you to easily debug on various phones and browsers.

    My own phone is Android, and the browser I checked in was Chrome.

    PS: I didn’t send the pdfs. I couldn’t access them to upload them, so I only sent the .pngs.

    Thanks a lot. I’ll work on it. Have a great day!

    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.

    @Ray-de-light Excellent, glad you got it sorted.

    Also I could have sworn that BrowserStack had a free plan with limited minutes, but maybe that’s no longer an option :person_shrugging: