Hello,
I am having trouble getting my banner image set and I'm not sure what else to check. I am using the "legal.png" image I found in another thread. This image is 1258x300, which I believe are the correct dimensions. However, the image height is being cut off and I'm not sure what CSS property to edit.
I have tried:
-Updating the height of "How can we help?" widget
-Set a class on the image (test) and called that class on my page-specific CSS with property "height: 300px"
-Set background-repeat and background-size properties. Currently set as "no-repeat" and "cover"
I am able to get this to display properly when I open the developer tools or if I shrink the width of my browser window.
Here is how it looks:
Here is the desired default result:
Here is the container page:
Here is an export of the page css:
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;
}
/* Max width for Containers to stay in view port*/
.container {
max-width: 100%;
}
.test{
height: 300px;
}
@media (max-width: 48em) {
.ng-scope.mobile-banner {
background-repeat: no-repeat;
background-size: cover;
}
.child-b-margin > span > div > *{
margin-bottom: 0rem;
}
.padding-right {
padding-right: 0rem;
}
.padding-top {
padding-top: 0rem;
}
}
@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;
}
}I have attached the image I am using for this.
Is there another CSS property I could try to set to get this to scale?
