Problem with dual button

  • Resolved IanW

    (@mikes46)


    4 years, 6 months ago

    Hi,
    I have a problem with the dual button module displaying properly on a mobile device. I have the width of the button set to 165px. On desktop and tablet they display properly, on mobile the buttons are beneath each other as expected but they change to full screen width. How do I keep the buttons the same size (165px) on mobile?

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor puneetsahalot

    (@puneetsahalot)

    Hello @mikes46

    Thanks for sharing the details.
    With dual-button module, the buttons get automatically stacked on mobile devices. We have set this as the default behavior because of the small screen size.
    However, you can keep the buttons same size with the following CSS: 

    @media only screen and (max-width: 480px) {
.fl-node-5eada01d3d8c3 .pp-dual-button-content .pp-dual-button, .fl-node-5eada01d3d8c3 .pp-dual-button-content .pp-dual-button .pp-button {
    display: inline-block;
    float: none;
    margin: 0 10px 0 0;
    width: 165px;
    text-align: center;
}
}

    Please add this code to the child theme’s style.css file.

    Thanks!

    Thread Starter IanW

    (@mikes46)

    @puneetsahalot
    Thanks for your quick reply. This CSS puts the buttons next to each other on mobile display. I wanted the buttons on top of each other on mobile as they were but the correct size (165px) not the full width of the screen.

    Thanks.

    Plugin Contributor puneetsahalot

    (@puneetsahalot)

    ah! My bad. Please remove the CSS that I provided earlier and use this one:

    @media only screen and (max-width: 480px) {
.fl-node-5eada01d3d8c3 .pp-dual-button-content .pp-dual-button, .fl-node-5eada01d3d8c3 .pp-dual-button-content .pp-dual-button .pp-button {
    margin: 0 auto 10px;
    width: 165px;
}
}
    Thread Starter IanW

    (@mikes46)

    @puneetsahalot
    Thank you. Thats great.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Problem with dual button’ is closed to new replies.