ElkArte Community

Elk Development => Theme development => Topic started by: niloc on June 17, 2016, 08:12:47 am

Title: Forum Width Issues (1.1)
Post by: niloc on June 17, 2016, 08:12:47 am
When the forum is set at 90%, it will become adaptive gracefully when used on Mobile or when the browser is resized to a mobile resolution.

However, if it's set at 960px or any other px, then it will only be half adaptive. I.e. The content shrinks, but there is still a scrollbar at the bottom for you to horizontally scroll to the end of the 960px.

Any thoughts on this guys? :)
Title: Re: Forum Width Issues (1.1)
Post by: Flavio93Zena on June 17, 2016, 08:32:56 am
Well yeah that's a bit obvious, if you force it to a specific px width how can 960px fit on a (for example) 320px resolution phone? With a scrollbar.
Title: Re: Forum Width Issues (1.1)
Post by: niloc on June 17, 2016, 11:39:16 am
What I would suggest is for the fixed width to be "deactivated" immediately when the case goes to mobile mode. But I'm not sure how to go about doing that! :/
Title: Re: Forum Width Issues (1.1)
Post by: CrimeS on June 17, 2016, 11:50:07 am
Well, you could override the wrapper above 960px:
Code: [Select]
@media (min-width: 960px) {
.wrapper {
 width: 960px !important;
}
}
Title: Re: Forum Width Issues (1.1)
Post by: emanuele on June 17, 2016, 12:15:06 pm
Considering the structure of the css, a simple pair of max-wdith in the two widest media queries (64em and 50em) could cover these edge cases, but...
/me is dumb when it comes to css, so either testing or an expert judgement is indeed necessary.
Title: Re: Forum Width Issues (1.1)
Post by: niloc on June 17, 2016, 12:47:33 pm
Nice! Thanks guys will try it out :)
Title: Re: Forum Width Issues (1.1)
Post by: niloc on June 20, 2016, 01:38:25 am
Yay I found a more graceful way.. but not sure if this can be implemented as a feature..

Code: [Select]
.wrapper {
margin: 0 auto;
/* Next controls forum width, when it is not set in admin. */
width: 100%;
/* Next limits maximum width on wide screens. */
/* Sized in em, since some people require larger text. */
/* For ease of reading, content really should not be too wide. */
max-width: 960px;
}

Basically, if the admin selects for the forum to be 960px width.. then it WILL be 960.. but if the user resizes the forum to be anything less than that, then it will revert back to a percentage resizing.. hence become adaptive once again!

So suggestion to be implemented in Elkarte is for the admin-selected-forum-width to affect the "max-width" of the forum, rather than the "width"...

Or at least allow an option for that. :) (Rather than having the admin hard code it into their own theme file)...