Hi,
I am not sure why my CTA - “Request A Quote” buttons are different sizes, I want them to all be the same size (perferrably the larger size). These buttons are custom built. Here is the source code for this custom built button:
<div style=“text-align: center; line-height: .5em;”>\ </div>
<div style=“text-align: center; line-height: .5em;”>\ </div>
<div style=“text-align: center; line-height: .5em;”>\ </div>
<div style=“text-align: center; line-height: .5em;”><a title=“REQUEST A QUOTE” class=“hs-call-email custom-button” href=“#”>REQUEST A QUOTE</a></div>
<div style=“text-align: center; line-height: .5em;”>\ </div>
<div style=“text-align: center; line-height: .5em;”>\ </div>
I did find that depending on where I place the button the size changes. I did check the desinger manager tool and played around with the template. But I would need to add 3 separate “Flex Columns” and “Group” adjusting the size to fit the “Request A Quote” in the middle or either sides. I noticed when I made the middle “Flex Column” wider the “Request A Quote” button became bigger. This did not work for the other buttons on the template.
I need some help and a possible walk through on this issue. Thank you!
You need to learn about CSS, that’s how the buttons and other elements are styled in the template. Your button has two CSS classes “hs-call-email” and “custom-button” that are likely setting its size and other properties. Check what the classes on your other two buttons are and try using those instead.
Ok, here is the the following information I found:
module.html (HTML=HubL):
<div style=“text-align: center; line-height: .5em;”><a title=“REQUEST A QUOTE” class=“hs-call-email custom-button a.email-modal” href=“#” style=“font-size: 55px; line-height: 50px;”>REQUEST A QUOTE</a></div>
module.css:
.request_quote_button {
display: inline-block;
/* line-height: 24px; */
padding: 10px 10px 8px;
text-transform: uppercase;
/* text-decoration: none; */
background: #e79024;
border-radius: 5px;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
/* -webkit-transition: .5s; */
transition: .5s;
min-width: 80px;
width: 550px;
text-align: center;
font-family: ‘Teko’;
/* font-weight: normal; */
font-size: 21px;
font-weight: 500;
outline: 0;
margin: 5px;
vertical-align: top;
/* letter-spacing: 0; */
color: #fff !important;
/* text-decoration: none !important; */
letter-spacing: 2px !important;
margin-left: 55px;
font-size: 55px;
line-height: 75px;
padding: 10px 30px 8px;
text-decoration: underline !important;
}
.custom-button {margin-top: 155px !important;}
@media(max-width:410px){
.custom-button {margin-top: 20px !important; margin-bottom: 45px !important;}
.request_quote_button {
width: 227px;
margin-left: 0;
font-size: 30px;
line-height:1.5em;
margin-bottom: 0px;
}
}
@media(max-width:950px){
.custom-button {margin-top: 20px !important; margin-bottom: 45px !important;}
.request_quote_button {
margin-left: 0px;
}
}
@media (min-width: 1200px)
.email-modal {
line-height: 75px;
letter-spacing: 2px;
}
@media (min-width: 992px)
.email-modal {
font-size: 55px;
padding: 10px 48px 8px;
}
@media (min-width: 768px)
.email-modal {
font-size: 30px;
padding: 10px 30px 8px;
}
a.email-modal {
font-family: ‘Teko’;
font-weight: 500;
font-size: 30px;
color: #fff;
display: table;
line-height: 45px;
padding: 15px 30px 12px;
text-transform: uppercase;
text-decoration: underline;
background: #e79024;
border-radius: 5px;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
margin: 0 auto;
margin-top: 40px;
text-align: center;
}
a {
color: #e79024;
text-decoration: none;
Based on this information above, are you able to help me figure out what to change? if you are able to figure out what needs to be changed can you highlight the changes? this would help me out a ton!
