Banner width for mobile devices

[silverwillow]

My (new) banner looks great on my pc, but the left and right sides are cut off when I look on my phone (desktop view.)  Is there some max width that's best for banners when viewing on a phone?  It also cuts off both sides (but not quite so badly) when I view on my Kindle fire.

So what's the optimal banner width?  If I make mine smaller, will that fix this problem?  Thanks.

Board link:  silversisterscafe.proboards.com/

[Shiz]

Your forum requires a login, but you'll want to look into CSS media queries.

@media only screen and (max-width: 767px) {

  #wrapper{
    width: 100%;
  }

}

max-width will apply this rule only when the screen width is 767px or smaller. 767 pixels is more of a tablet width. 380px would be a good mobile size. 

[Kami]

A few things about the above post.

1. The #wrapper ID will affect your entire forum, not just your banner (you'd want #banner instead)

2. Media queries will not help fixed width images unless you use the media query to swap out different versions of the image for different sizes. If you simply use the media query to stretch or compress an image to the appropriate size, you will experience quality loss when the width of the browser is too small or too large for the image's resolution.

[silverwillow]

thank you!

[Shiz]

Jun 13, 2018 14:33:40 GMT -8 Kami said:

A few things about the above post.

1. The #wrapper ID will affect your entire forum, not just your banner (you'd want #banner instead)

2. Media queries will not help fixed width images unless you use the media query to swap out different versions of the image for different sizes. If you simply use the media query to stretch or compress an image to the appropriate size, you will experience quality loss when the width of the browser is too small or too large for the image's resolution.

I pasted something I did on one of my own forums, but didn't go too deep into details because I wasn't able to see their forum to get a better idea on what needed to happen and where.


Thanks for pointing that out.