Hi
I’m working on a product landing page and I’m having some trouble centering some of the elements in my page… (the features and contact form). Cannot understand why. Could someone help me?
Thanks
Hi
I’m working on a product landing page and I’m having some trouble centering some of the elements in my page… (the features and contact form). Cannot understand why. Could someone help me?
Thanks
Hi @inespontes110 ,
You can center the #features
div by adding margin: 0 auto
and increasing the width :
#features {
display: block;
width: 90%; // this should be more than 50%
padding: 20px;
margin: 0 auto;
}
For the #contact
form, you can add the justify-content
property for the already existing class .row
:
.row{
justify-content: center;
}
You can add it for the .wrapper-feature
also :
.wrapper-feature {
display: grid;
grid-template-columns: 200px 600px;
grid-template-rows: 1fr 1fr 1fr;
margin: 0 auto;
padding: 20px;
justify-content: center; // add this
}
And to center your contact form button you can add display: block
to the .btn-contact
class :
.btn-contact {
color: white;
width: 316px;
height: 45px;
font-family: "Roboto", sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
color: #000;
background-color: #fff;
border: none;
border-radius: 45px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
margin: 15px auto;
display: block; // add this
}
I hope this will help!
It helped a lot! Thank you
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.