two buttons touching in responsive (vertical) layout

Homepage › Community Forums › Aspire Theme Support › two buttons touching in responsive (vertical) layout

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 6, 2017 at 6:42 pm #20509
    BartA
    Customer

      Hi!

      Ive added two buttons to widget2 which works perfectly fine in horizontal layout
      but ive noticed that in responsive layout (vertical) the two buttons touch.
      Ive tried adding space between them with <P> or &nbsp but neither gives the proper result.

      Could you please recommend a way to add space between the buttons when they are displayed below each other (in vertical mode)?

      https://tandarts-haarlem.nl

      Best regards,
      Bart Alders

      February 6, 2017 at 6:54 pm #20510
      BartA
      Customer

        Found a solution that works in <div class=”one half first”> etc,
        although i do find the spacing between the two buttons in horizontal mode is quite a bit bigger than id prefer it to be

        February 9, 2017 at 1:46 am #20518
        Wes
        Moderator

          What about this? – http://i.imgur.com/DJsLwGK.png

          Let me know if you’re interested in having your buttons aligned in this way.

          I can also show how to add Responsive code that will take care of the alignment on mobile phones.

          February 11, 2017 at 5:03 am #20526
          BartA
          Customer

            Thats exactly what id like 馃檪

            and yes in vertical mode i suppose theyd have to be below each other

            February 14, 2017 at 12:29 pm #20555
            Wes
            Moderator

              Looks like you already got it working. If you noticed the margin-right isn’t working, it’s because you’re missing a - in between margin-right in your code. Once you add that it should work.

              When the browser us resized they both become vertical. So to add some space in between you can add margin-top to the second button like this –

              <a class="button clear-button" href="tel:023-5516765" style="width: 275px;margin-top: 20px;"><i class="fa fa-phone fa-1x"></i> 023 - 551 67 65</a>

              Let me know if that helps.

              February 14, 2017 at 4:45 pm #20558
              BartA
              Customer

                Thanks 馃檪
                Yeah I noticed you have the same setup in the first widget of your mainpage so i sneaked in and picked the code from there ;D

                This code is starting to become readable text to me now, thanks a lot for all your help Wes.

                Offtopic, if i may;
                In widget 5 i have the background scrolling from underneath the content in ipad viewport.
                Im quite sure you allready solved that but i cant dowload the code since studiopress still hasnt uploaded the most recent version of the theme (still 1.1.4 there)
                Is there any way i can get future updates from your site? 馃槷

                February 15, 2017 at 11:38 pm #20570
                Wes
                Moderator

                  “In widget 5 i have the background scrolling from underneath the content in ipad viewport.”

                  Can you try adding background-size: auto; to .front-page-7 and see if that fixes it? I would add this in the responsive section that covers the iPad.

                  “studiopress still hasnt uploaded the most recent version of the theme (still 1.1.4 there)”

                  I’m actually still working on the update so it’s not quite ready just yet. StudioPress adds the updates in pretty quickly, almost instant, so you won’t have to worry about waiting once it’s ready.

                  I try and add the updates to this site once StudioPress adds it on theirs so they both show up at the same time. I’ll make an announcement on Twitter/Social Media once the new update is available.

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