Title: Responsive button alignment
Last modified: October 3, 2022

---

# Responsive button alignment

 *  Resolved [mauricemark03](https://wordpress.org/support/users/mauricemark03/)
 * (@mauricemark03)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/responsive-button-alignment/)
 * Hey everyone!
 * I’m currently building a website and integrated social login using Nextend.
 * The plugin works fine, except that I can’t align button in responsive mode – 
   the buttons are aligned in the center of the page when using a destkop device
   like a laptop.
 * However, when using a phone, the buttons align on the very right and not in the
   center.
 * I tried the following shortcode: [nextend_social_login align=”center” redirect
   =”[https://www.oho-nachhilfe.de/%5D](https://www.oho-nachhilfe.de/%5D)
 * I also tried adding margin/padding, but none of it changed the positioning.
 * Any ideas on how to solve this issue?
 * Thanks for any help and best Regards,
 * Maurice
 * Screenshot: [https://imgur.com/a/91Yx1cX](https://imgur.com/a/91Yx1cX)
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresponsive-button-alignment%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Support [Laszlo](https://wordpress.org/support/users/laszloszalvak/)
 * (@laszloszalvak)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/responsive-button-alignment/#post-16067008)
 * Hi [@mauricemark03](https://wordpress.org/support/users/mauricemark03/)
 * I checked the linked page and what I currently see is that you have the social
   buttons published 4 times. So first of all you need to make sure you are trying
   to modify the styles of the one that you really want.
    For example: There are
   cases where you used the “center” align option, and there are cases where you
   used “left”.
 * The second issue that I see is that, you used a too general CSS selector for 
   your CSS:
 *     ```
       div.nsl-button.nsl-button-default.nsl-button-facebook {
           margin-top: -20px;
       }
   
       div.nsl-container .nsl-button-default {
           margin-left: 150px;
       }
       ```
   
 * With the first one you are basically targeting all Facebook buttons with the 
   default button style.
    And the second one adds that big left margin to all social
   buttons with the default button style, basically that’s why your button will 
   be pushed to the right side in mobile view.
 * If you want to modify the styles of one instance, then you should add a unique
   and custom CSS class on the container that you put the slider into. Then you 
   should write a CSS selector with the class of that container. That way your CSS
   would modify only the social buttons inside that particular class that you specified
   in the selector.
 * Note:
    I am not really sure if you really need that much social buttons. Since
   with CSS media queries:
    - [https://www.w3schools.com/css/css_rwd_mediaqueries.asp](https://www.w3schools.com/css/css_rwd_mediaqueries.asp)
 * you could modify the CSS of the elements in the different views separately.
 * Best regards,
    Laszlo.
 *  Thread Starter [mauricemark03](https://wordpress.org/support/users/mauricemark03/)
 * (@mauricemark03)
 * [3 years, 8 months ago](https://wordpress.org/support/topic/responsive-button-alignment/#post-16067657)
 * Dear [@laszloszalvak](https://wordpress.org/support/users/laszloszalvak/) ,
 * thank you for your quick response!
 * I completely forgot about the CSS – it was old code that I should already have
   deleted – it fixed the issue, thank you!
 * Best Regards,
 * Maurice

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Responsive button alignment’ is closed to new replies.

 * ![](https://ps.w.org/nextend-facebook-connect/assets/icon.svg?rev=3336394)
 * [Nextend Social Login and Register](https://wordpress.org/plugins/nextend-facebook-connect/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/nextend-facebook-connect/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/nextend-facebook-connect/)
 * [Active Topics](https://wordpress.org/support/plugin/nextend-facebook-connect/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/nextend-facebook-connect/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/nextend-facebook-connect/reviews/)

## Tags

 * [login](https://wordpress.org/support/topic-tag/login/)

 * 2 replies
 * 2 participants
 * Last reply from: [mauricemark03](https://wordpress.org/support/users/mauricemark03/)
 * Last activity: [3 years, 8 months ago](https://wordpress.org/support/topic/responsive-button-alignment/#post-16067657)
 * Status: resolved