[Support request] Align two buttons into 2 columns (Elements)

[David]

Hi Tom & Co!

I’m making the first sectio of homepage with Elements (fullpage) but I have a problem.

I have the H1, a following paragraph, and two columns (your plugin).

With a mobile phone the buttons show’s good.

In the mobile version the buttons are placed well (one on top of the other). But in the desktop version, the buttons are centered.

The left button should be aligned to the right. And the right button should be aligned to the left.

For CSS he could do it, but then the mobile version and all the other buttons affect me.

How can I do it? Thank you

Plese check out the pictures 🙂

https://ibb.co/dcMv8LT
https://ibb.co/HY4nx61
https://ibb.co/0rs85FF

[Leo]

Hi there,

Looks like there are some HTML errors in there.

Can you try this format as the HTML content first?

<h1 style="text-align:center;">Consultor de Marketing Digital para Empresas</h1>'
<p style="color:#cccccc; word-wrap:break-word; text-align:center;">Ayudo a las empresas a mejorar su presencia online. Posicionamiento web, experiencia de usuario y una buena imagen es todo lo que necesitas para mejorar tus ventas.</p>
<div class="hero-buttons">
    <a class="button ghostpink" href="https://BUTTON-LINK">VER PROYECTOS</a>
    <a class="button pink" href="https://BUTTON-LINK">SOLICITAR AUDITORÍA</a>
</div>

And choose the horizontal alignment to left:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

Let me know when this is done and I’ll provide some CSS to align the buttons without using lightweight grid columns 🙂

[David]

It works perfect!

Ok, i should be check again the HTML/CSS course 😛

Some CSS to align buttons will be good 🙂

[David]

Hi there,

tag elements are inline elements, so if they have enough space they will horizontally align. Reduce the left / right padding in the Header Element and you should see the result.

If you want to keep the H1 and Paragraph constrained then you could do this:

@media (min-width: 769px) {
    .page-hero h1, .page-hero p {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

[Author]

Posts