Advertisement:

Author Topic: Full width banner - automatically scales to any screen size  (Read 46475 times)

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #20 on: February 07, 2017, 03:47:20 AM »
Yes, it will resize. It just fits whatever space is available. No, height doesn't matter. It all scales automatically.

Personally I'd set a max-width on the wrapper so the forum doesn't get too wide. I know some people insist on filling the entire screen with the forum, but past a certain point it just makes things harder to read. IMO anything over about 1200 px is just a PITA. I don't like chasing sentences for five miles.

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 273
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #21 on: February 11, 2017, 07:18:36 AM »
OK so following the css instructions in the OP I added a banner and ended up with (see attached)
It isn't full width? / as wide as you'd expect.
If I ctrl-scroll to change the zoom, it gets bigger than the available space. (attach 2)
(or do I need to chnage the reslution not zoom to see this work)

Thoughts?


Also is there a way to turn this banner off, and just have the default set up, when viewing from mobiles?
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #22 on: February 11, 2017, 04:31:27 PM »
Did you clear your browser cache?

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 273
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #23 on: February 11, 2017, 07:55:05 PM »
Yep
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #24 on: February 11, 2017, 09:02:16 PM »
Ok. Are you on the original stodgey default theme, or the newer responsive version? I haven't looked at the latter yet.

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 273
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #25 on: February 12, 2017, 01:03:09 AM »
Responsive curve
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Offline lurkalot

  • Sr. Member
  • ****
  • Posts: 938
  • Gender: Male
  • Tinyportal Support
    • guitaristguild on Facebook
    • Tinyportal on GitHub
    • @GuitaristGuild on Twitter
    • Guitarist Guild
Re: Full width banner - automatically scales to any screen size
« Reply #26 on: February 12, 2017, 08:29:44 AM »
Yep

You sure it wasn't your browser playing up?  I only ask because I looked at your site yesterday, and the banner looked good at full width, I even checked zooming in to different sizes and refreshed the page each time, it resized accordingly,  looked fine to me. ;)

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 273
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #27 on: February 12, 2017, 07:37:28 PM »
Plays absolute havoc with mobiles though....
Took up chunks of screen real estate, doesn't scale on mobile size screens etc
Generated a huge number of complaints from in very short order... :lol:

Shame because if I could get this working (or have a  script where it only shows on desktop devices and not mobiles) then it'd be great.

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #28 on: February 12, 2017, 10:59:30 PM »
I'll grab the responsive curve mod and play around with it over the weekend. It's probably something simple. I know I did test it with the original curve at a range of resolutions.

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 273
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #29 on: February 13, 2017, 01:45:25 AM »
Cheers mate much appreciated.

The main issue is not so much on desktops, but rather the effect it has on mobiles. Doesn't scale, takes up a big chunk of screen real estate, and makes it harder to see / get to / scroll to the main menu items.  Kinda throws things outa whack.

Scaling a banner to suit (relatively) small smartphone screens may well be something between impossible and pointless.
I think the better option would be (if possible) to have it:
On desktops - display banner (perhaps an on/off option would be good here)
On mobiles - do not display banner, just header text as normal.

I think that would be the most practical solution.  Whether that's easy or even possible to implement? Haven't a clue. I'm sure you'll let me know... I just hope you haven't torn out all your hair by then.... LOL

edit: One super cool extra feature would be if you could have a range of images and 'cycle' between them randomly - I.e. each time a user accesses the forum it grabs randomly one of 'x' images.  Just a feature idea, nothing I expect you to take seriously.... :)
 
« Last Edit: February 13, 2017, 02:31:21 AM by landyvlad »
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Offline Gluz

  • Native Language Support Specialist
  • Sr. Member
  • *
  • Posts: 942
  • Gender: Male
Re: Full width banner - automatically scales to any screen size
« Reply #30 on: February 13, 2017, 02:24:19 AM »
For that you specify in CSS certain screen size and up to show your image, so in mobile doesn't shows.

In the responsive part of the CSS you should find some rule for "big screens" like for desktops.
Need help with PHP, HTML, CSS, Themes or MODs?

Quote
Think in spanish, habla en ingl├ęs.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #31 on: February 13, 2017, 02:52:56 AM »
Scaling a banner to suit (relatively) small smartphone screens may well be something between impossible and pointless.
It's easy to do. Whether it's pointless or not is subjective.


Quote
I think the better option would be (if possible) to have it:
On desktops - display banner (perhaps an on/off option would be good here)
On mobiles - do not display banner, just header text as normal.

Like Gluz says, that's easy too. You just use media queries. Check out the contents of responsive.css and see if any of it makes sense.


Quote
edit: One super cool extra feature would be if you could have a range of images and 'cycle' between them randomly - I.e. each time a user accesses the forum it grabs randomly one of 'x' images.  Just a feature idea, nothing I expect you to take seriously.... :)

That's easy too. Lotsa people (me included) have done that before.

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 47,850
Re: Full width banner - automatically scales to any screen size
« Reply #32 on: February 13, 2017, 05:10:16 AM »
Quote
edit: One super cool extra feature would be if you could have a range of images and 'cycle' between them randomly - I.e. each time a user accesses the forum it grabs randomly one of 'x' images.  Just a feature idea, nothing I expect you to take seriously.... :)

That's easy too. Lotsa people (me included) have done that before.

http://www.simplemachines.org/community/index.php?topic=532391.msg3783270#msg3783270

Offline uzma

  • Newbie
  • *
  • Posts: 1
Re: Full width banner - automatically scales to any screen size
« Reply #33 on: February 13, 2017, 06:19:10 AM »
Add max-with and max-height to 100%

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 273
    • Michael Reed on Facebook
    • GSX1400 Owners ORG
Re: Full width banner - automatically scales to any screen size
« Reply #34 on: February 14, 2017, 07:41:00 PM »
Thank you all.  I'll have a look but I'm not all that up with css and other coding... which is why I like 'mods' so much - does things forme I'm not capable of doing myself.

In an ideal world these functions would be included in the mod. Having said that I know there may be all sorts of technical reasons, as well as a lack of time on the mod owners part, as to why that doesn't happen so please don't take that as a criticism.

Cheers. :)
Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #35 on: February 25, 2017, 10:45:02 PM »
OK so following the css instructions in the OP I added a banner and ended up with (see attached)
It isn't full width? / as wide as you'd expect.

What size is the image in that shot? Is it actually big enough to fill the width of the header. If it aint, there's your problem.


Quote
Plays absolute havoc with mobiles though....
Took up chunks of screen real estate, doesn't scale on mobile size screens etc
Generated a huge number of complaints from in very short order... :lol:

Scales just fine on my test site. All the way down to 240px screen width.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #36 on: February 26, 2017, 09:53:45 PM »
landyvlad: if the banner isn't scaling on mobiles at your site, that indicates there is a problem with the coding. Maybe a mod is interfering, or maybe you didn't copy all the required code correctly.

Online shawnb61

  • Support Specialist
  • Full Member
  • *
  • Posts: 453
    • sbulen on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #37 on: February 26, 2017, 11:19:51 PM »
I had three problems when I first tried to use this automatic scaling info shared by Antechinus & the responsive curve theme at the same time. 

It always properly scaled my forum logo .jpg, but a few things were whacked out of proportion, especially on mobile.   

First was that I hated the search box, as it took the whole width & made things very odd, so I made this change in responsive.css.  This basically got rid of the width & the padding, and replaced it with a much smaller padding:
Code: [Select]
#searchform .input_text, select
{
/* modified by sjrb to make searchbox work better responsive
width: 95%;
padding: 5px 0;   */
padding: 1px 0;
}

Second was too much padding around the title in index.css by reducing the padding from 10 px to 2 px:
Code: [Select]
/* the main title, always stay at 45 pixels in height! */
.forumtitle
{
/* sjrb modification
padding: 0 0 10px 0;  */
padding: 0 0 2px 0;
}

Third was to make the header smaller & tidier in index.css by removing the margin-bottom:
Code: [Select]
/* clearing the floats */
#top_section
{
min-height: 65px;
overflow: hidden;
/* removed by sjrb to make header smaller & tidier on mobile
margin-bottom: 3px;   */
}

This might help others experiencing the same things...  These changes basically make the header use up less real estate on mobile devices in 2.0, allowing more content to be shown.
« Last Edit: February 26, 2017, 11:40:41 PM by shawnb61 »
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: Full width banner - automatically scales to any screen size
« Reply #38 on: February 26, 2017, 11:51:05 PM »
Yes I noticed the header area looked a bit messier than I would have liked, but I wasn't sure if that was due to the responsive Curve mod being very basic or not (IOW, I hadn't checked the mod by itself since I don't use it).

I suppose I should really try the basic mod+theme combo and see how that looks, then tweak the full width banner shiz on top of that. Only catch is I know what I'm like. I'll probably want to rewrite half of the mod too. :P

Edit: Just too a look on local. Yup, she's basic alright. Good thing I never try to use Curve on a phone. :D

Online shawnb61

  • Support Specialist
  • Full Member
  • *
  • Posts: 453
    • sbulen on GitHub
Re: Full width banner - automatically scales to any screen size
« Reply #39 on: February 27, 2017, 12:42:43 AM »
I spend most of my time on mobile.  My users, too.  Responsive curve is a very helpful mod, and makes things much more readable and usable. 

Our biggest issue with Responsive Curve was that our banner became unwieldy. 

Your updates above, Antechinus, made it feasible for us to use Responsive Curve.  It's quite nice now.  Thank you. 
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp