CODEWITHSUNDEEP
htmlcss
studentoftruth
studentoftruth

Reputation: 43

text too small to read (mobile design)

I have been coding a plain HTML and CSS website with no template. One of the major pains has been trying to make my site mobile-friendly.

PAGE: https://www.gatewaysofhislight.com/characters/benaiah/

I used this code in the 'head' section:

meta name="viewport" content="width=device-width, initial-scale=0.3"

There is one stubborn alarm that keeps failing google's mobile-friendly test. It says the "text is too small to read" even though my CSS file calls for 18px Georgia text which should be more than large enough. I have tried bringing up this page on my phone and it reads just fine with no pinching or zooming required. Here is the CSS code for the body text

body {
  letter-spacing: .04em;
  word-spacing: .1em;
  font-family: Georgia, Times-new-roman, serif;
  font-size: 18px;
  color: rgb(220,220,220);
  padding-right: 50px;
  padding-left: 50px;
  line-height: 2.3em;}

Hopefully someone here can help suggest a line of code to add or alter to my page to make the googlebot happy, as google is now basing their pagerank more on mobile-friendliness.

Thanks for the help

Upvotes: 1

Views: 7706

Answers (2)

Manu Panduu
Manu Panduu

Reputation: 431

Steps to Avoid three errors (Text too small to read , Clickable elements too close together , Content wider than screen) in the Google Search Console:

  1. Check whether the css is working or not, if its working then check the Your website in mobile phone. if its working perfect in mobile even its coming the problem in Google search console follow these steps...
  2. Create a Robots.txt file in Public_HTML(C panel)

  3. what ever the links tags or scripts tags or img tags you have used for your website copy that Urls and paste into the robots.txt file like this...

    User-agent: *
    Disallow:

    User-agent: *
    allow: https://Your_website/css/example_1.css
    allow: https://Your_website/css/example_2.css
    allow: https://your_website/js/js/example_1.js
    allow: https://your_website/js/js/example_2.js

Note : Please wait for 24 hrs to 48 hrs then check in the google search console your errors will not available :)

Upvotes: 2

Luu Hoang Bac
Luu Hoang Bac

Reputation: 442

Try to use:

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"

It'll work

Your code above, it makes everything looks smaller in mobile device because you used initial-scale=0.3. And when you use initial-scale=1 like I said, you should restyle something in your code to make your web look better.

Upvotes: 2

Related Questions