I am having problems with some widgets, specifically the typeahead search widget. When making changes to the CSS in the Page Specific CSS, they are not being applied. In a PDI, the behavior is fine, the changes are made, but in the client's OOTB instance, this behavior does not occur.
Another thing I found strange is that, during the edit part, the widgets appear transparent, while in the PDI they appear normally in the same section.
The CSS code is as follows:
$banner-768-svg : "a76552593bbc66102e6525b693e45a1c.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;
}
.input-group.input-group-typeahead {
margin-top: 200px !important;
margin-bottom: 40px !important;
}
.mobile-banner {
background-position: right center !important;
height: 35rem;
}
/* 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;
}
}
