Advertisement:

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

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,081
  • 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.
Mods

Quote
"Oh hai! We haz awesome back end logix!" *does happy dance*
"Cool. Hey I wanna do ***** on the front end."
"No can do."
"Why not?"
"Coz we haz awesome back end logix!" *happy dance again*
"Meh."

GitHub for n00bz


Offline landyvlad

  • Jr. Member
  • **
  • Posts: 152
    • 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?
I'm new at this - thanks to everyone for their help !

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,081
  • 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?
Mods

Quote
"Oh hai! We haz awesome back end logix!" *does happy dance*
"Cool. Hey I wanna do ***** on the front end."
"No can do."
"Why not?"
"Coz we haz awesome back end logix!" *happy dance again*
"Meh."

GitHub for n00bz


Offline landyvlad

  • Jr. Member
  • **
  • Posts: 152
    • 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
I'm new at this - thanks to everyone for their help !

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,081
  • 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.
Mods

Quote
"Oh hai! We haz awesome back end logix!" *does happy dance*
"Cool. Hey I wanna do ***** on the front end."
"No can do."
"Why not?"
"Coz we haz awesome back end logix!" *happy dance again*
"Meh."

GitHub for n00bz


Offline landyvlad

  • Jr. Member
  • **
  • Posts: 152
    • 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
I'm new at this - thanks to everyone for their help !

Offline lurkalot

  • Sr. Member
  • ****
  • Posts: 809
  • 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. ;)

Tinyportal.net Official Support Site For TinyPortal.
Camera Craniums Running SMF 2.0.13 / Tinyportal 1.2
Guitarist Guild Running SMF 2.0.13 / Tinyportal 1.2R Beta

Offline landyvlad

  • Jr. Member
  • **
  • Posts: 152
    • 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.

I'm new at this - thanks to everyone for their help !

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,081
  • 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.
Mods

Quote
"Oh hai! We haz awesome back end logix!" *does happy dance*
"Cool. Hey I wanna do ***** on the front end."
"No can do."
"Why not?"
"Coz we haz awesome back end logix!" *happy dance again*
"Meh."

GitHub for n00bz


Offline landyvlad

  • Jr. Member
  • **
  • Posts: 152
    • 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 »
I'm new at this - thanks to everyone for their help !

Offline Gluz

  • Full Member
  • ***
  • Posts: 553
  • Gender: Male
    • Al-eXs on GitHub
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,081
  • 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.
Mods

Quote
"Oh hai! We haz awesome back end logix!" *does happy dance*
"Cool. Hey I wanna do ***** on the front end."
"No can do."
"Why not?"
"Coz we haz awesome back end logix!" *happy dance again*
"Meh."

GitHub for n00bz


Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 45,616
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: 152
    • 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. :)
I'm new at this - thanks to everyone for their help !