Navigation
Archive / How to Make Button responsive (self-adjusting for desktop & mobile)
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • October 14, 2016 at 4:36 am #1215941
    -core
    Participant

    Hi,

    i need some help in making the buttons on my page responsive. It is fine when viewed on Desktop, but when in mobile, the buttons are off-centre and cut off.

    How can i make the button look the same when on Desktop and Mobile?

    Thanks!

    October 14, 2016 at 4:36 am #1215942
    -core
    Participant
    This reply has been marked as private.
    October 14, 2016 at 6:47 am #1216030
    Paul R
    Moderator

    Hi,

    Thanks for writing in!

    You can add this under Custom > Edit Global CSS in the Customizer.

    
@media (max-width: 767px) {
.page-id-72 .entry-content .x-btn
   width:auto;
}
}

    Hope that helps.

    October 14, 2016 at 7:23 am #1216061
    -core
    Participant

    Hi Paul,

    thanks for the reply.
    However, that does not work and the buttons are still the same.

    October 14, 2016 at 9:57 am #1216221
    Joao
    Moderator

    Hi There,

    Please add the following code to Appereance > Customizer Custom CSS

    @media (max-width: 700px) {
.x-btn.x-btn-transparent, .x-btn.x-btn-transparent:hover {
    font-size: 17px;
    max-width: 350px;
} }

    Hope it helps

    Joao

    October 19, 2016 at 1:07 am #1221876
    -core
    Participant

    Hi Joao,

    that works perfectly!
    Thanks so much!

    October 19, 2016 at 2:46 am #1221947
    Friech
    Moderator

    You’re more than welcome, glad we could help.

    Cheers!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1215941 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>