Tag Cloud on Mobile

Site URL: https://roamerbatteries.com/posts

Hello, 

I was wondering if you might be able to help. I created a tag cloud on my blog to help users sieve through articles. It looks good on desktop but on mobile looks odd. Can you help? It would be great to reduce the size of the font and line height on mobile.

This is the code I used to create it:

/*  Tag Cloud */
//tag cloud
.sqs-tagcloud li a {
    color: rgb(0, 0, 0);
    background-color: #f2f2f2;
    font-style: bold; 
    padding: 0px 00px;
    border-radius: 0px;
    font-size: 20px;
    text-align: center;
    text-decoration: underline; 
    text-decoration-color: #e85627;  
   text-underline-position: under;  
-webkit-transition: .15s ease-out;
-moz-transition: .15s ease-out;
transition: .15s ease-out;
}

//tag cloud:hover
    .sqs-tagcloud li a:hover {
    background-color: rgba(255, 120, 0, .2);
}

//tag cloud
.sqs-tagcloud li {
    margin-bottom: 15px;
    margin-right: 10px;
}

.tagcloud-block {
    padding-top: 0;
}

Thank you

Holly

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.tagcloud-block ul li {
    margin-bottom: 0px;
}
}

Thank you that's great 🙂

I tried to change the font size too by adding the below code but it never worked.

Could you confirm the best way to do this?

//tag cloud mobile
@media screen and (max-width:767px) {
.tagcloud-block ul li {
    margin-bottom: 0px;
    font-size: 14px;
}
}

Don't worry, I figured it 

//tag cloud mobile
@media screen and (max-width:767px) {
.tagcloud-block ul li {
    margin-bottom: 0px;
    font-size: 14px;
}
  
  .sqs-tagcloud li a {
  font-size: 14px;
}
}

Thank you for your quick help