Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Buttonstyle Question

Buttonstyle Question

Scheduled Pinned Locked Moved General Discussion
8 Posts 2 Posters 147 Views
  • 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.
  • Hayo GebauerH Offline
    Hayo GebauerH Offline
    Hayo Gebauer
    wrote on last edited by
    #1

    I created this ,kind of, Linktree copy:

    www.hayogebauer.com/links

    I was wondering if I can arrange the buttons next to each other, with equal spacing, instead of on top of each other.

    So far I am using individual textboxes with the assigned buttonstyle-class.

    Thanks for any help!

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by Richard
      #2

      Dear @Hayo-Gebauer

      If you wish to use the Stack element to achieve this.


      Apply a custom ID to the Stack element:

      Screen Shot 2021-08-30 at 12.03.15 PM.png


      Screen Shot 2021-08-30 at 12.03.05 PM.png

      With this you can apply display:flex; making the child elements behave a number of possible ways:

      https://css-tricks.com/snippets/css/a-guide-to-flexbox/


      This code #stack-parent-container{display:flex;} gave me the following result:

      Screen Shot 2021-08-30 at 12.06.55 PM.png

      Paddings and Margins can then be applied to the child stack elements, spacing them as you wish.


      Best wishes šŸ–
      Richard
      Hayo GebauerH 2 Replies Last reply
      1
      • RichardR Richard

        Dear @Hayo-Gebauer

        If you wish to use the Stack element to achieve this.


        Apply a custom ID to the Stack element:

        Screen Shot 2021-08-30 at 12.03.15 PM.png


        Screen Shot 2021-08-30 at 12.03.05 PM.png

        With this you can apply display:flex; making the child elements behave a number of possible ways:

        https://css-tricks.com/snippets/css/a-guide-to-flexbox/


        This code #stack-parent-container{display:flex;} gave me the following result:

        Screen Shot 2021-08-30 at 12.06.55 PM.png

        Paddings and Margins can then be applied to the child stack elements, spacing them as you wish.


        Best wishes šŸ–
        Richard
        Hayo GebauerH Offline
        Hayo GebauerH Offline
        Hayo Gebauer
        wrote on last edited by
        #3

        @Richard this is great, thank you! I'll look into it

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by Richard
          #4

          @Hayo-Gebauer No worries Good Luck! šŸ’„

          1 Reply Last reply
          0
          • RichardR Richard

            Dear @Hayo-Gebauer

            If you wish to use the Stack element to achieve this.


            Apply a custom ID to the Stack element:

            Screen Shot 2021-08-30 at 12.03.15 PM.png


            Screen Shot 2021-08-30 at 12.03.05 PM.png

            With this you can apply display:flex; making the child elements behave a number of possible ways:

            https://css-tricks.com/snippets/css/a-guide-to-flexbox/


            This code #stack-parent-container{display:flex;} gave me the following result:

            Screen Shot 2021-08-30 at 12.06.55 PM.png

            Paddings and Margins can then be applied to the child stack elements, spacing them as you wish.


            Best wishes šŸ–
            Richard
            Hayo GebauerH Offline
            Hayo GebauerH Offline
            Hayo Gebauer
            wrote on last edited by
            #5

            @Richard

            hey, I've tried to recreate your example step by step, but it doesn't have any different result for some reason.

            1 Reply Last reply
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              Dear @Hayo-Gebauer

              Do you have a link to the page you are trying to achieve this on? I could take a closer look.

              Also your CSS code & any other relevant screenshots. I could be you need to add !important to override Lay Theme's CSS but this should only be used if truly necessary, e.g

              #stack-parent-container{
              display: flex !important ;
              }
              

              Talk soon Hayo & best wishes 🌻
              Richard
              Hayo GebauerH 1 Reply Last reply
              0
              • RichardR Richard

                Dear @Hayo-Gebauer

                Do you have a link to the page you are trying to achieve this on? I could take a closer look.

                Also your CSS code & any other relevant screenshots. I could be you need to add !important to override Lay Theme's CSS but this should only be used if truly necessary, e.g

                #stack-parent-container{
                display: flex !important ;
                }
                

                Talk soon Hayo & best wishes 🌻
                Richard
                Hayo GebauerH Offline
                Hayo GebauerH Offline
                Hayo Gebauer
                wrote on last edited by
                #7

                @Richard Hey Richard,

                sure:

                What I have in Custom CSS:
                #stack-parent-container{
                display: flex !important ;}

                Testpage:
                https://hayogebauer.com/test/

                Bildschirmfoto 2021-09-28 um 14.46.05.png

                1 Reply Last reply
                0
                • RichardR Offline
                  RichardR Offline
                  Richard
                  Global Moderator
                  wrote on last edited by Richard
                  #8

                  Dear @Hayo-Gebauer

                  The # is the CSS selector for an ID, you must set the id to stack-parent-container. Or if you wish to select a class then using the . selector:

                  .stack-parent-container{
                  display: flex ;
                  }
                  

                  (remove !important)


                  Best wishes Hayo šŸŒ
                  Richard
                  1 Reply Last reply
                  1
                  Reply
                  • Reply as topic
                  Log in to reply
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes


                  I also code custom websites or custom Lay features.
                  šŸ’æ Email me here: šŸ’æ
                  info@laytheme.com

                  Before you post:
                  1. When using a WordPress Cache plugin, disable it or clear your cache.
                  2. Update Lay Theme and all Lay Theme Addons
                  3. Disable all Plugins
                  4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                  This often solves issues you might run into

                  When you post:
                  1. Post a link to where the problem is
                  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                  Online Users
                  J
                  jaredh
                  Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                  laytheme.com
                  • Login

                  • Don't have an account? Register

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Search