Custom Code For Schedule Banner

Site URL: https://quinoco.squarespace.com/

For the top scheduling banner on the home page, how can I customize the font size, type & color for the button and header? I also want the "Schedule an appointment for delivery" text to be centered. See here, password: quinoco , we are using the scheduling function code to display this, heres the code injection current code:

<div class="acuity-booking-bar" style="background: #bf1e2d; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px;  display: inline-block;">Schedule An Appointment For Delivery<a href="https://app.squarespacescheduling.com/schedule.php?owner=21439535" target="_blank" class="acuity-embed-button">Schedule Appointment</a></div><script src="https://embed.acuityscheduling.com/embed/bar/21439535.js" async></script>

6 minutes ago, TVB said:

Site URL: https://quinoco.squarespace.com/

For the top scheduling banner on the home page, how can I customize the font size, type & color for the button and header? I also want the "Schedule an appointment for delivery" text to be centered. See here, password: quinoco , we are using the scheduling function code to display this, heres the code injection current code:

 

<div class="acuity-booking-bar" style="background: #bf1e2d; color: #fff; padding: 8px 12px; border: 0px; -webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;box-shadow: 0 -2px 0 rgba(0,0,0,0.15) inset;border-radius: 4px;  display: inline-block;">Schedule An Appointment For Delivery<a href="https://app.squarespacescheduling.com/schedule.php?owner=21439535" target="_blank" class="acuity-embed-button">Schedule Appointment</a></div><script src="https://embed.acuityscheduling.com/embed/bar/21439535.js" async></script>

 

 

Add this to Design->Custom Css

.acuity-booking-bar {
  text-align: center;
}
.acuity-embed-button, a.acuity-embed-button, a.acuity-embed-button:link {
  color: #fff;
  background-color: #82291e !important;
  font-size: 11px;
}

@TVB I see your site on tablet looks ugly, some text break new line random, some text is very narrow. If you check, you will see some problems.

1. Add to Design > Custom CSS

/* home banner size */
@media screen and (max-width:900px) and (min-width:641px) {
body.homepage .desc-wrapper p:not(:empty) strong {
    font-size: 80px !important;
}
}

2. The text is narrow.

Add to Design > Custom CSS

/* review columns width */
@media screen and (max-width:900px) and (min-width:641px) {
div#page-5f356156e99f7478cc9f3ecd .span-12>.row:nth-child(9) {
.span-2 {
    width: 5%;
}
.span-1 {
    width: 5% !important;
}
.span-3 {
    width: 30%;
}
blockquote {
    padding-left: 0;
    padding-right: 0;
}
}
}

It will be like this

You can check on other pages, if you find problems, just post here, we will give the code to fix.