Search code examples
htmlcsstwitter-bootstrapgoogle-chromewidescreen

Website layout has suddenly changed in Chrome on widescreen monitors

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!

Solution

  • 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;
}