[JimmyJazz]

I have an issue with the way the Gravatar is loading on mobile devices (screenshot attached)

I have integrated Commentics onto a webpage using an existing CSS class as shown below:

Code:

<div class="12u$"><span class="image fit">[[!snippet]]</span></div>

The "!snippet" is the call to the Commentics PHP code.

With this everything loads great and the comment system is fully responsive just like the rest of the webpage.

Apart from the Gravatar issue on mobiles which is occupying the full width of the screen.

My question is about CSS, what I want to do is place a line in my existing website CSS page that will override how the Gravatar is loading on mobile, I want it to remain the small size and not occupy the screen width of its container.

Or 

Maybe it is easier to do in Commentics CSS?

I'm open to suggestions on this...

[Steven]

Hi can you provide a link to your page so I can determine what's happening?

[JimmyJazz]

Hi Steven,
Yes I loaded it onto this page to trial. You can test on mobile or reduce the size of your laptop/desktop screen to mobile size and you will see the effect it has on the gravatar:

https://bit.ly/2NxF0BJ

The Commentics comment system is at the bottom of the page

[Steven]

Okay there are quite a few styling issues that I can see.

For the gravatar this will fix it:

.cmtx_gravatar_area img {
width: auto !important;
margin: auto !important;
}

To stop the captcha showing full width:

#cmtx_securimage_image {
width: auto !important;
}

To keep the 'Sort By' field on the same line:

.cmtx_sort_by_field {
display: inline-block !important;
}

To fix the star ratings, remove these from your main.css file:

input[type="checkbox"]+label, input[type="radio"]+label

input[type="checkbox"]+label:before, input[type="radio"]+label:before

[JimmyJazz]

Thanks Steven, that worked a treat :-)