News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Full width banner - automatically scales to any screen size

Started by Antechinus, June 18, 2014, 04:52:28 AM

Previous topic - Next topic

Antechinus

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.

landyvlad

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?
"Put as much effort into your question as you'd expect someone to give in an answer"

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.

Be the person your dog thinks you are.

Antechinus


landyvlad

"Put as much effort into your question as you'd expect someone to give in an answer"

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.

Be the person your dog thinks you are.

Antechinus

Ok. Are you on the original stodgey default theme, or the newer responsive version? I haven't looked at the latter yet.

landyvlad

"Put as much effort into your question as you'd expect someone to give in an answer"

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.

Be the person your dog thinks you are.

lurkalot

Quote from: landyvlad on February 11, 2017, 07:55:05 PM
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. ;)

landyvlad

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.

"Put as much effort into your question as you'd expect someone to give in an answer"

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.

Be the person your dog thinks you are.

Antechinus

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.

landyvlad

#29
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.... :)
 
"Put as much effort into your question as you'd expect someone to give in an answer"

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.

Be the person your dog thinks you are.

Gluz

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.

Antechinus

Quote from: landyvlad on February 13, 2017, 01:45:25 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.


QuoteI 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.


Quoteedit: 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.

Illori

Quote from: Antechinus on February 13, 2017, 02:52:56 AM
Quoteedit: 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

uzma


landyvlad

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. :)
"Put as much effort into your question as you'd expect someone to give in an answer"

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.

Be the person your dog thinks you are.

Antechinus

Quote from: landyvlad 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.

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.


QuotePlays 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.

Antechinus

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.

shawnb61

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:
#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:
/* 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:
/* 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.
Address the process rather than the outcome.  Then, the outcome becomes more likely.   - Fripp

Antechinus

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

shawnb61

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

Advertisement: