1

I am trying to control font size of the text inside the 1x3 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;
    }
}
Improve this question

1 Answer 1

Reset to default
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.