Topic-icon Sobre distorsiones en los botones del componente

Active Subscriptions:

None
Hi. I am using a slider to place the icons of social networks so that users subscribe to the main site whose URL is this prensapolitica.com.do/. But the buttons have two behaviors that I would like to know how to correct them. The first behavior is that it appears when a user wants to subscribe, slightly distorted buttons appear. (Look at image one)

The second behavior that I would like to correct is that when a user accesses through a mobile device the buttons are presented horizontally, that is to say one next to another and as a consequence of this some are lost, some are not seen. I thought that configuring it in the back end in "Vertical" mode the buttons would be presented in this way, but it is not like that. (Look at second image).


[/url]

File Attachment:
The topic has been locked.
Support Specialist
6 years 2 weeks ago #63677 by mel
There is a conflicting style on your site that is causing the spacing problem. It's found in prensapolitica.com.do/modules/mod_jatwitter/assets/style.css at line 12 for the .twitter class to set "padding: 15px 0 !important;"

You can target our elements with the following style to fix it:
.sourcecoast .twitter {
padding: 0px !important;
}

Try adding that CSS and let me know if the problem is still occurring.

-Melissa
The topic has been locked.
Active Subscriptions:

None
6 years 2 weeks ago #63681 by hancel
Hello, thank you very much for your prompt response. Effectively, with this solution the buttons look good.
Now it would only be missing the solution of the buttons when they are displayed on mobile devices, they are deployed horizontally, although it is configured to be shown vertically. (look at the attached image).
Thank you
The topic has been locked.
Support Specialist
6 years 2 weeks ago #63686 by mel
If you add the following style for mobile, this should put the social buttons each on one line:
div.social-login {
clear: both;
}

You can target mobile devices with CSS media queries. For instance, the following would be for tablets:
@media (min-width: 768px) and (max-width: 979px) { div.social-login { clear: both; } }

This would be for phones:
@media (max-width: 767px) { div.social-login { clear: both; } }

-Melissa
The topic has been locked.