bai
Junior Member

I coughed. Then I went into labor.
Posts: 209
What's for dinner?: Take Out
What's for dessert?: Cheesecake
inherit
tbsofficial@outlook.com
241711
0
Sept 23, 2018 14:23:39 GMT -8
bai
I coughed. Then I went into labor.
209
February 2017
bai
Take Out
Cheesecake
|
Post by bai on Sept 20, 2018 9:24:10 GMT -8
So I got some great advice from Heartbreaker 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: 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.
|
|
inherit
16666
0
Nov 28, 2018 12:14:20 GMT -8
TIKOLICIOUS
Soo... hey?!
317
November 2003
toya5185
Don't Feed Ricky
Cheesecake
|
Post by TIKOLICIOUS on Sept 20, 2018 9:58:57 GMT -8
So I got some great advice from Heartbreaker 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: 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
Junior Member

I coughed. Then I went into labor.
Posts: 209
What's for dinner?: Take Out
What's for dessert?: Cheesecake
inherit
tbsofficial@outlook.com
241711
0
Sept 23, 2018 14:23:39 GMT -8
bai
I coughed. Then I went into labor.
209
February 2017
bai
Take Out
Cheesecake
|
Post by bai on Sept 20, 2018 10:05:46 GMT -8
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?
|
|
inherit
16666
0
Nov 28, 2018 12:14:20 GMT -8
TIKOLICIOUS
Soo... hey?!
317
November 2003
toya5185
Don't Feed Ricky
Cheesecake
|
Post by TIKOLICIOUS on Sept 20, 2018 10:08:39 GMT -8
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
|
|
inherit
to heal and protect
156500
0
Nov 19, 2012 0:39:05 GMT -8
Heartbreaker Kami
every step, a new journey
12,148
July 2010
kamiyakaoru
Chicken Curry
Cheesecake
Kami's Mini-Profile
|
Post by Heartbreaker Kami on Sept 20, 2018 11:56:22 GMT -8
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.
|
|