Hi,
I am trying to customize the look of my 'Book Now' widget to match my website (Red Canoe Lodging), but I am unable to override the default Bootstrap styling on the Header/Jumbotron section.
I have placed custom CSS in the widget settings, but the .jumbotron grey background and default h1 font/color persist despite using:
High-specificity selectors (e.g., body .jumbotron).
The !important flag on all properties.
The all: unset property to try and clear default styles.
It seems the widget's default stylesheet is either loading after my custom CSS, or there are inline styles/scripts forcing the default Bootstrap appearance.
Could you please:
Help me remove the grey .jumbotron background?
Force the H1 header to use my brand font (Montserrat) and color (#C41E3A)?
Ensure the Phone Input flag doesn't overlap the text placeholder?
Here is the CSS I am trying to apply:
/* Brand: Red Canoe Lodging */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
/* Force White Background on Header */
.jumbotron, div.jumbotron {
background: #ffffff !important;
background-color: #ffffff !important;
padding: 0 !important;
margin: 0 !important;
}
/* Force Brand Font & Color on Text */
h1, .jumbotron h1 {
font-family: 'Montserrat', sans-serif !important;
color: #C41E3A !important;
text-transform: uppercase !important;
}
/* Fix Phone Input Overlap */
input[type="tel"] {
padding-left: 80px !important;
}
Thank you.
