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

[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

[Leo]

Hi there,

Not sure if I fully understand.

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

What needs to change?

[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

[David]

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;

[Klaus]

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

[David]

Glad to hear that

[Author]

Posts