Website layout has suddenly changed in Chrome on widescreen monitors

Question

Updated my website design last week and tested it on different browsers and devices – it's a portfolio site using Bootstrap - and all was good. I checked my website this morning on my widescreen monitor using chrome and the full-width images seemed to have been reduced in size leaving a margin on the right-hand side.

This anomaly is not showing up on different browsers or even on Chrome using a smaller screen!

The website is live at http://www.burnser.com/index.html

Any help would be greatly appreciated. Thanks!

Just to add when I test this on Chrome from my local folder the site looks fine on my widescreen monitor. It's just when i upload that something seems to happen. — Brian Byrne, Jan 25 '17 at 14:56
[Please read this](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) — Pete, Jan 25 '17 at 16:24

score 1 · Accepted Answer · answered Jan 25 '17 at 15:10

1

The images themselves only have a native width of 1600px. If they should always be full screen, you should include width: 100%; to your CSS.

.carousel-inner>.item>a>img, 
.carousel-inner>.item>img, 
.img-responsive,
.thumbnail a>img, 
.thumbnail>img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

answered Jan 25 '17 at 15:10

seemly

1,090
10
20

Thanks for the reply seemly, but there's no .carousel in my code. – Brian Byrne Jan 25 '17 at 15:42
If you inspect one of your images, the CSS in my answer is defined by Bootstrap. I just added the `width: 100%;` to it, which fixes the issue. – seemly Jan 25 '17 at 16:25
Sorry for the confusion. It worked! Thanks a million seemly. – Brian Byrne Jan 25 '17 at 17:31

Website layout has suddenly changed in Chrome on widescreen monitors

1 Answers1