Header Picture Resolution on Different Platforms?

[bai]

So I got some great advice from Kami the other day about doing some CSS coding for different resolutions. The issue is that my forum theme is "almost" "responsive" but the header picture is atrocious on phones and computers with different resolutions from my 1920x1820 Chromebook. 

Here's an example thanks to another user:

Aug 19, 2018 8:02:24 GMT -8 TIKOLICIOUS said:

Jul 14, 2018 7:44:15 GMT -8 bai said:

I need help coming up with a good color scheme that is not so overbearingly pink but still "matches" the header.

Any help?

Any other opinions and suggestions would be great.

I actually like the new theme you posted here (is this the active theme? Because I went and registered and Im still seeing the "warrior" theme instead)

Okay, so upon actually viewing the site, I realized I had to zoom out a little bit to stop from scrolling so far to get to boards on your forum. And I've had to do this on FireFox, Edge & my Mobile browser!! The images you have your forum are just too wide and take up a bit of space. Now the mobile browser view you may not be able to help (I've tried to no real solution), but the desktop you can.

Mobile View

Firefox Mobile

Internet Explorer

DESKTOP

Firefox zoomed in at 100%

80%

I think this may need some attention before anything else gets changed or fixed on the forum.

So how do I go about this? I am not sure which keywords to google because the ones I did turned up absolutely nothing useful.

[TIKOLICIOUS]

Sept 20, 2018 9:24:10 GMT -8 bai said:

So I got some great advice from Kami the other day about doing some CSS coding for different resolutions. The issue is that my forum theme is "almost" "responsive" but the header picture is atrocious on phones and computers with different resolutions from my 1920x1820 Chromebook. 

Here's an example thanks to another user:

Aug 19, 2018 8:02:24 GMT -8 TIKOLICIOUS said:

I actually like the new theme you posted here (is this the active theme? Because I went and registered and Im still seeing the "warrior" theme instead)

Okay, so upon actually viewing the site, I realized I had to zoom out a little bit to stop from scrolling so far to get to boards on your forum. And I've had to do this on FireFox, Edge & my Mobile browser!! The images you have your forum are just too wide and take up a bit of space. Now the mobile browser view you may not be able to help (I've tried to no real solution), but the desktop you can.

Mobile View

Firefox Mobile

Internet Explorer

DESKTOP

Firefox zoomed in at 100%

80%

I think this may need some attention before anything else gets changed or fixed on the forum.

So how do I go about this? I am not sure which keywords to google because the ones I did turned up absolutely nothing useful.

Im not really sure you'll be able to google this one. You may have to request some help here on support for that since there's something in the overall coding template that causes certain things to resize and such. Hell, I've even pulled my own forum up on my mobile browser (Im finding that the people who love my social media accounts just LOVE being able to visit the forum on a mobile device. So I figured I would look into making it easier to use the forum on mobile devices instead of desktop) and my banner is partially hidden! The only thing I can think of is that the banner size is too wide for mobile browsers or its coded to have banners that are at max, a certain width. Its very difficult to figure out when you're main concentration ISN'T coding.

[bai]

TIKOLICIOUS I have been attempting to teach myself coding for the last few years and I have never really come across this, even with all the time I have spent designing ProBoards themes! So thank you for bringing it up! It's something I knew of myself but it never occurred to me to attempt fixing it for whatever reason. Kami and I believe Scott told me in another thread that we would have to add some extra CSS codes so our themes adapt properly to different screens, but I don't know where to start with that. If I find out, do you want me to tag you/let you know?

[TIKOLICIOUS]

Sept 20, 2018 10:05:46 GMT -8 bai said:

TIKOLICIOUS I have been attempting to teach myself coding for the last few years and I have never really come across this, even with all the time I have spent designing ProBoards themes! So thank you for bringing it up! It's something I knew of myself but it never occurred to me to attempt fixing it for whatever reason. Kami and I believe Scott told me in another thread that we would have to add some extra CSS codes so our themes adapt properly to different screens, but I don't know where to start with that. If I find out, do you want me to tag you/let you know?

YEEEESSSSSS!!! 😍 I would appreciate it immensely because I am lost

[Kami]

You can indeed google it -- what you're looking for is media queries​. In short summary, you can use the @media rule to specify a condition that the CSS must meet in order to display whatever CSS follows.

Using this, you can give each new image a different class, then specify minimum and/or maximum screen widths and target each class to not display. For example, if you user a small, medium, and large image:

/* For Phone Widths */
@media (min-width: 481px) and (max-width: 767px) {
    .large-banner {
        display: none;
    }
    .medium-banner {
        display: none;
    }
}

This way, .small-banner will be displayed, and while the other two images will be hidden. Repeat this for common breakpoints (sizes where displays normally change to respond to the screen size), switching out which images aren't displayed.