Front page resize issue

[mattsoutham]

Hi,

When the site goes to mobile view the front page alerts don’t show the full image background.

I have linked to some screen grabs of this or you can view live on the website

http://battlesbigweekend.co.uk/

http://postimg.org/image/lk12p9czl/

http://postimg.org/image/kidv3fd35/

Topic

[Jason Bobich]

Hi,

It’s because you’re using such small images there, about 300px wide. Since the viewport you’re showing in the screenshot is larger than that, you get an image that is displayed smaller than the viewport.

1. You can either use a larger image (which will result in a heavier image that needs to be loaded).

2. Or you can force the image to be 100% width, using CSS (which will result in lost of quality of the image).

@media( max-width: 767px ) {
  .tb-image-box img {
    min-width: 100%;
  }
}

3. Or, maybe just center the images and add some spacing, using CSS.

@media( max-width: 767px ) {
  .tb-image-box {
    text-align: center;
  }
  .tb-image-box img {
    margin: 30px 0;
  }
}

[Author]

Replies