Jump to content

Tag Cloud on Mobile

Recommended Posts

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

Screenshot 2022-02-25 at 12.37.06.png

Link to comment

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;
}
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.