Bugs& Errors - Banner

[michodgs25]

Banner

• when each page is first loading, each banner does not appear at first or glitches. Once each page is refreshed the banner works as intended. The issue potentially could stem due to the fact the banner is a very large size thus the browser has to work harder to load the image.

• Reduced banner on desktop: from 30em to 25em

  • Reduced banner on tablet:

/*tablet banner size*/
@media screen and (max-width: 64.375em) {
    .banner {
        width: 100%;
        height: 18em;
    }
}

/*container*/
@media screen and (max-width: 64.375em) {
    .banner-outer {
        width: 100%;
        height: 18em;
    }
}

• And on Mobile:

/*mobile banner size*/
@media screen and (max-width: 37.5em) {
    .banner{
        width: 100%;
        height: 15em;
    }
}
/*container*/
@media screen and (max-width: 37.5em) {
    .banner-outer {
        width: 100%;
        height: 15em;
    }
}

An unfortunate side effect of implementing a solution to the inline maps issue is having to add an additional script to the footer of the page. The site was having loading issues prior to this and now the main banner sometimes does not appear at all. The page has to be refreshed for this to happen, this occurs on desktop screens where the banner is at its largest.

Summary:

The banner works as intended once the page is refreshed, future iterations to look at ways to resolve the issue by reducing the file size or a way to help the browser load an image of that size more efficiently.