Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Button borders overlapping

    General Discussion
    2
    5
    341
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      Remco van Dun last edited by

      Hi!

      I was wondering if somebody could help me out with the following: Ive got multiple buttons next to each other with a padding and a border. When resizing the window to a smaller size, these border are overlapping at a certain point? Also if a button is composed out of multiple words, I would like to keep them next to each other. Adding extra columns between the buttons doesn't help and will only create more distance when they do eventually move under each other at mobile size.

      .button {
      padding: 15px 15px;
      display: inline-block;
      background-color: transparent;
      border: 2px solid #FFFFFF;
      border-radius: 25px;
      line-height: 1;
      text-decoration: none;
      color: white;
      opacity: 1;
      }

      .button:hover{
      background-color: #f0f0f0;
      text-decoration: none;
      opacity: 1;

      best,
      Remco

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @Remco-van-Dun
        PADDING makes the buttons bigger.
        And because they are bigger they overlap space in the grid.

        Try to make the padding with % or VH instead of PX.
        That might bring you closer to a good result.

        Do you have a link to your website? Then I can have a closer look.

        Thank you!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • R
          Remco van Dun last edited by

          Hi Marius

          thanks for the reply but % or VH did not make a difference. You can see it happening when you resize the window at the Social Media row. Is there something to do perhaps with the breakpoint of desktop to mobile?

          best,
          Remco

          1 Reply Last reply Reply Quote 0
          • R
            Remco van Dun last edited by

            To be seen at https://nonline.nl/flux

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Dear @Remco-van-Dun

              I would insert the buttons as HTML elements.
              Then you give them a width of 70% and a padding of 15%.
              Then they fill 100% of the width.

              I hope I was clear :-)

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • First post
                Last post

              Before you post

              Use the Search Feature. Maybe there is already a solution to your issue.

              1. Update Lay Theme and all Lay Theme Addons
              2. Disable all Plugins
              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
              4. Now see if your problem solved itself
              5. Go here, see if your problem is listed here:
              Troubleshooting

              When you post:
              1. Post a link to where the problem is
              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

              Thanks!

              Online Users

              K
              S
              A
              S
              K

              Recent Topics

              • A

                Unable to update lay theme / to login wp admin

              • A

                New button feature not available

              • A

                Theme crashed - because of Polylang?

              • A

                fullscreen slider: slow load time + mobile: images dropping to bottom

              laytheme.com