Hi, I'm trying to apply this CSS to hero container
background: linear-gradient(to left, #92a8e4, #e8e8e86b), url("d372736683950210a5c313e0deaad31d.iix") !important;
background-position-x: 0%, 0% !important;
background-position-y: 0%, 0% !important;
background-size: auto, auto !important;
background-size: cover !important;
background-position: center !important;
This is the container settings:
And this is the page specific CSS:
$banner-768-svg : "d9bc1319533130101865ddeeff7b12ba.iix";
main.body {
padding-top: 0rem !important;
}
/* Padding for container after banner image */
.padding-top {
padding-top: 2.4rem;
}
/* Padding bottom after each widget */
.child-b-margin > span > div > *{
margin-bottom: 2.4rem;
}
.mobile-banner {
background: linear-gradient(to left, #92a8e4, #e8e8e86b), url("d372736683950210a5c313e0deaad31d.iix") !important;
background-position-x: 0%, 0% !important;
background-position-y: 0%, 0% !important;
background-size: auto, auto !important;
background-size: cover !important;
background-position: center !important;
}
/* Max width for Containers to stay in view port*/
.container {
max-width: 100%;
}
@media (max-width: 48em) {
.ng-scope.mobile-banner {
background-image:url($banner-768-svg) !important;
background-repeat: no-repeat;
background-size: cover;
}
.child-b-margin > span > div > *{
margin-bottom: 1.6rem;
}
.padding-right {
padding-right: 0rem;
}
.padding-top {
padding-top: 1.6rem;
}
}
@media (max-width : 62em) {
.container {
width : 100%;
}
.col-md-4 {
width : 100%
}
.col-md-8 {
width : 100%
}
.left-column{
padding-left: 2.4rem;
padding-right: 2.4rem;
}
.right-column{
padding-left: 2.4rem;
padding-right: 2.4rem;
}
}
@media (min-width: 62em) {
.container {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.left-column{
padding-right: 0rem;
}
.right-column{
padding-left: 2.4rem;
padding-right: 1.6rem;
}
}
.container.bg {
height: 500px;
}
.container.quick {
margin-top: 25px !important;
padding-top: 18px;
}
.fa.fa-search {
color: #5d64b5 !important;
}Can someone tell me why it's not working? Thanks
