My website appears differently in desktop and mobile view.
https://i.sstatic.net/MGJSk.png
While the tags align perfectly on desktop, they overflow onto a new line in the mobile view. Specifically, #pytorch and #tensorflow are pushed to a new line which I want to avoid. If the tags cannot fit on one line, I prefer to hide the excess ones like #pytorch and #tensorflow.
Here is a snippet of the code:
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@430&display=swap');
.main {
max-width: 1200px;
margin: 0 auto;
/* more CSS rules here */
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8dad7d7cccbcccad9c8f88c968d968b">[email protected]</a>/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- more head elements -->
</head>
<body>
<div class="container">
<div class="main" style="padding-top: 3%; padding-bottom: 5%;">
<div class="blog-card">
<div class="row" style="background-color: #fff; padding-top: 1%;">
<div class="col-md-4">
<img src="https://mlthon.pythonanywhere.com/media/guides/img/carbon_2.png"
style="max-width: 100%; height: auto; border-radius: 7px; padding-bottom: 3%;">
</div>
<div class="col-md-8">
<a href="/article/Loading-Really-Large-Datasets-Efficiently-With-Generators-Pytorch-and-TensorFlow"
style="text-decoration: none;">
<!-- more HTML content here -->
<p>Tags:</p>
<!-- Tags with issue -->
<div class="tag">
<p style="font-family: 'Dosis'; font-size: 1rem; color: #008AFF; cursor: pointer;"
onclick="tag('deep-learning')">
<span>#deep-learning</span></p>
<!-- more tags -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>