author avatar size

Hello,

I am using the blog element from your plugin. On the blog element, I am using the format that allows author avatars. I previously also asked this question that is how can I change the author avatar sizes. You replied with this code:

<span style=”font-family: Inconsolata, Consolas, Monaco, "Lucida Console", monospace; font-size: 12.8px; text-wrap: nowrap; background-color: rgb(246, 246, 246);”>.premium-blog-author-thumbnail img {
width: 40px !important;
}</span>

This worked however, I wanted the avatar sizes to based on mobile, desktop, and tablet screens. You guys told me to try this code:

/*Any Mobile Device*/
 @media only screen and (max-width: 767px) {
     .premium-blog-author-thumbnail img {
         width: 40px !important;
    }
}
/*Tablets Device*/
 @media only screen and (max-width: 1024px) {
     .premium-blog-author-thumbnail img {
         width: 50px !important;
    }
}
/*large Device*/
 @media only screen and (max-width: 1200px) {
     .premium-blog-author-thumbnail img {
         width: 60px !important;
    }
}

However this does not work for me. The first one works but the second piece of css does not work. I am not sure why. Please help me in doing this. Secondly is there a way to make the author avatars rounded rather than squares.

Warm regards,

The page I need help with: [log in to see the link]