Unexpected css issues when window expanded past 1800px wide

[Historical Forums User]

I’ve got some weird issues happening when the browser window is expanded past 1800px.

http://photo941.com/aerial-drone-video-photography.html

On this page, the banner background image at the top disappears when the window expands past 1800px wide.

Also, on all pages the footer styles unexpectedly change.

I’m using Bootstrap v3.3.7.

[Paulie_D]

This rule is likely the issue

@media only screen and (max-width: 1800px) /* change this or just delete the condition */
style.css:1975
.drone-banner {
    height: 800px;
    background: url(../img/banners/crayton-front.jpg) no-repeat center bottom fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center bottom;
    margin-top: 101px;
    margin-bottom: 0px;
}

[Historical Forums User]

That media query doesn’t exist in my css.

The .drone-banner style is there but I don’t have a single media query with “max-width: 1800px” in any of my files.

WEIRD!!!

[Paulie_D]

I don’t have a single media query with “max-width: 1800px” in any of my files.

Erm…yes, you do…one in fact and I think you may have some malformed CSS.

You have a unclosed brace in the query starting on line 1809+

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1800px) {
    #matterport-page .left-right-boxes .example .copy h2{
    font-size: 30px;
}

…which might be bleeding over.

Run your CSS through a validator.

[Historical Forums User]

Thanks Paulie_D! I thought I did a search for that I must have had an extra space or something. Thanks for the find!

[Author]

Posts