Archived topic
Align two buttons into 2 columns (Elements)
3 replies · Started by David on September 26, 2019
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
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 :)
It works perfect!
Ok, i should be check again the HTML/CSS course :P
Some CSS to align buttons will be good :)
Hi there,
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;
}
}