Question 378412 in Html Question posted in
Some basic documentation can be found here.

Html – How to Control Font Size in Table for Mobile View

I am trying to control font size of the text inside the 1×3 table for mobile view only. Yes, I included:

<meta name = "viewport" content = "width=device-width, initial-scale=1.0">

<table width="700" align="center">
<tr>
<td><b><a href= "ListOfGenreLists.html" style="font-size: 40pt; color: #4B0082; text-decoration: none">Genre</a></b>&nbsp;&nbsp;&nbsp; </td>
<td><b><a href= "ListOfMiscellaneousLists.html" style="font-size: 40pt; color: #4B0082; text-decoration: none">Miscellaneous</a></b>&nbsp;</td>
<td><b><a href= "ListOfYearLists.html" style="font-size: 40pt; color: #4B0082; text-decoration: none">Year</a></b> </td>
</tr>
</table>

@media screen and (max-width:767px) {
table, td { 
        display: block; 
    }
    td { 
        position: relative;
        padding-left: 0%; 
        font-size: 10%;
        line-height: 50px;
    }
}
Tags:

2

Answers


  1. 0

    Use a detection javascript?
    Put the following in a file called uadetect.js.

    // Detect which mobile devices 
function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// Load the appropriate CSS file
if (isMobile()) {
  document.write('<link rel="stylesheet" href="mobile.css">');
} else {
  document.write('<link rel="stylesheet" href="desktop.css">');
}

    Then you can add it after your HTML’s <head> tag:

    <html>
  <head>
    <script type="text/javascript" src="uadetect.js"></script>
    <!-- Optional default CSS file -->
    <link rel="stylesheet" href="default.css">
  </head>
  <body>
    <!-- Your HTML here -->
  </body>
</html>

    You can have a custom .css for all cases.

    Login or Signup to reply.
  2. 0

    If you use ‘px’ instead of ‘pt’ for your font-size, the font size would be adapted automatically to the device size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search