Button changing position when zooming in or zooming out the browser window

  • Hi all, Button keep changing its position when zooming in or zooming out the browser window. I’m running out of ideas how to keep it fixed at one place.

    CSS responsible for Download Spec sheet :

    .download-btn {
    display: inline-block;
    padding: 6px 16px 6px 16px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #B7248F !important;
    background-color: transparent;
    border-radius: 38px;
    cursor: pointer;
    border: 1px solid #B7248F !important;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

    Css for Enquiry Now button:

    .cta-button5 > .avia-button {
    border: 1px solid #253370;
    background-color: transparent;
    font-size: 11px;
    border-radius: 38px;
    font-weight: 600;
    padding: 10px 20px 10px 20px;
    color: #253370;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}


    Images for reference:
    https://prnt.sc/mAdOoVDEo5ve for 100% zoom
    https://prnt.sc/q-Qc1E1u3ijW for 90% zoom

    Please help me :((

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

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

  • It looks like your issue with the button changing position when zooming in or out might be related to how the CSS is structured. Specifically, the width: 100%; property in your CSS might be causing the buttons to resize based on the width of their parent container, which changes when zooming.

    Moderator bcworkz

    (@bcworkz)

    It looks like you’ve attempted to make the buttons align by adding some empty space to containers with less text. But as the zoom level or viewport width changes, the text takes up different amounts of vertical space, changing the button positions. Because of the way layouts shift in browsers, it’s very difficult to get all the bottom buttons to always align when they are relative to the text above.

    The solution is to make bottom buttons relative to the bottom of their outer container. Do so by applying position: relative; to the buttons, then also applying a bottom: distance (can be positive or negative) from the bottom of the outer container. You might consider placing both buttons in their own separate intermediate container so they can both be bottom positioned together. Or bottom position each button separately, whichever way you prefer.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Button changing position when zooming in or zooming out the browser window’ is closed to new replies.