Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 12, 2016 at 6:19 pm #631501
    andreki

    Hello!

    I have a responsive design problem with getting a button to align center on smartphones.

    So on this site http://www.musikverstehen.net you can see the first red button which says “Ich komme”. On desktop view it’s all nice and fine but when i look at the page on my iphone it looks like that:

    http://www.bilder-upload.eu/show.php?file=ad5b00-1463069601.png

    I want it to align in the center and not move outside the element.

    I had to customize the button with CSS by the way, because my clients wanted the button to be a bit larger than the normal x large and also the font size.

    Please help!
    Thanks
    André

    May 12, 2016 at 7:16 pm #631532
    Vinay

    Hey andreki,

    The button is centered but the min-width is larger than the screen width hence it appears to extend. To resolve this issue please reduce the button min-width.

    To do so please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
.avia-button.avia-size-x-large {
    min-width: 230px!important;
}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.