[Resolved] In my header element I want to vertical align two buttons

Home Forums Support In my header element I want to vertical align two buttons

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1287574
    Klaus

    Hello, I have a header element with two buttons. On mobile devices it doesn’t look so pretty, as the buttons don’t exactly vertically align. One of the buttons is widening only because of html empty spaces. So what can I do, code a flex box maybe, maybe something else? Thanks Klaus

    #1287816
    Leo
    Staff
    Customer Support

    Hi there,

    Not sure if I fully understand.

    This looks pretty good to me?
    https://www.screencast.com/t/AfGAdAHW

    What needs to change?

    #1288158
    Klaus

    Hello, this is my code. You can see I try to work around my problem, how to create two buttons with the same width. Lots of & nbsp; Looks o.k. horizontal aligned, doesn’t fit 100% vertically aligned.

    `-div class=”page-hero-buttons”-
    -a class=”button” href=”https://login.apis.tools” rel=”nofollow” style=”background-color:#FF8000; border-radius: 5px; padding:10px; margin:10px;”–strong- & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; LOGIN | app.apis.tools & nbsp; & nbsp; & nbsp; & nbsp;-/strong–/a-
    -a class=”button” href=”https://register.apis.tools” rel=”nofollow” style=”background-color:#FF8000; border-radius: 5px; padding:10px;”–strong- REGISTER | register.apis.tools -/strong–/a-
    -/div-

    I replaced < > with —

    This is the css (I took it from one of your examples from the tutorial):

    .page-hero-content {
    background: rgba(255,255,255,0.8);
    padding: 20px;
    border: 5px solid rgba(211,211,35,0.2);
    border-radius: 10px;
    max-width: 600px;
    }


    @media
    (max-width: 1200px) {
    .page-hero-content {
    padding: 10px;
    margin: auto;
    }
    }

    .inside-page-hero {
    display: -ms-grid;
    display: grid;
    grid-template-areas: “left right”;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
    }

    .page-hero-content {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: left;
    }


    @media
    (max-width: 768px) {
    .inside-page-hero {
    display: block;
    }
    }

    Regards Klaus

    #1288802
    David
    Staff
    Customer Support

    Hi there,

    you can add a Flex column to your buttons container – by default the block elements will then fill the space available:

    @media(max-width: 768px) {
        .page-hero-buttons {
            display: flex;
            flex-direction: column;
        }
    }

    On your first button you have margin: 10px; – change this to margin-bottom: 10px;

    #1292703
    Klaus

    Hello David, yes, did it, thank you, looks better.

    #1292884
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.