Greetings. Having just deployed my first Pinegrow website on Netlify, I’m running into a CSS problem. The site looks fine on all breakpoints on my local server, but on the Netlify site, the font-size in the mobile view is changed. All the <p>s and the <li>s should be the same size. Yet in two of the sections, the size is smaller. I’m including a screenshot that shows the problem areas. This doesn’t seem to happen on desktop, and it’s ok on Firefox on mobile, but in all the chrome-based browsers on mobile I’m getting the variation. Any suggestions on how to troubleshoot would be very appreciated by this beginner dev. Github link: GitHub - Ray-de-light/oscar-utopia-FINAL: Website for an attorney in Ecuador
I uploaded your site to netifly and did not notice any difference between the font sizes you indicated in the screenshot. Have you tried clearing the browser cache?
Chrome on Desktop
Chrome on Android
Hi Plunky, thanks for taking a look. Yes. I’ve opened the site on my mobile phone in Firefox, Chrome, Edge, Opera and Brave. In each case I’ve cleared gone to SETTINGS > APPS > “NAME OF APP” > STORAGE > CLEAR CACHE first. (maybe there’s somewhere else to do it). One my phone, the only browser that shows the font-sizes correctly is Firefox which leads me to believe it’s a chrome problem (I think the other browsers are all chrome-based). Which browser did you use? I just had my wife check it on chrome browser on her phone and it shows the same font-size problem in the same place. I haven’t figured out how to use dev tools on my phone yet, which would help me troubleshoot this. Any suggestions?
You have several style sheets linked to the page. Edit the html so style.css is last in the list and see if that helps.
On chrome I see it fine, I have tried both from Windows with Chrome and from my cell phone with Chrome.
I have also tried from various devices, using a desktop application, still the same result, no problem.
However, from mobile device you can’t use development tools directly. By following this guide, you can connect your android device to your PC and use the development tools. Inspect the element that gives you problems and see which css file it gets the rules for styling from.
Attached, I am sending you a picture of my android device (chrome) with which I visited the website. In addition, also a video of a desktop application simulating various mobile devices.
