MyBB Community Forums

Hi I need to add min-width: 990px; to #container. Could you tell me please what #container controls and what may happen if I add min-width: 990px;

#container can be found under global.css.
By setting:
#container {
min-width: 990px;
.
.
}

your container is supposed to never be a width of less than 990px.

Thank you but could you tell me please what problem this might cause just to be aware of? And what #container does?
Thanks

Container is a frame of your main site to hold the contents in a fashioned way.
If you see this site there is a light grey textured area visible at both side. The whole thing is 'body', and a white column with shadows at sides holding all the site contents - that is '#container'.

If you do such, this may impose a horizontal scrollbar in browsers while displaying devices less than a width of 990px.

Thank you very much for your reply now I understand.

May I ask which theme are you using?. Putting this setting in #container may work or not depending upon the theme being used.
As Effone said it imposes a minimum width on the container region.

Edit:- Just saw you use Apart theme which is a good choice and the edit should work. To check your site in various resolutions you can use this online tool https://quirktools.com/screenfly/

(2013-07-25, 11:58 AM)Bala Wrote: [ -> ]May I ask which theme are you using?. Putting this setting in #container may work or not depending upon the theme being used.
As Effone said it imposes a minimum width on the container region.

Edit:- Just saw you use Apart theme which is a good choice and the edit should work. To check your site in various resolutions you can use this online tool https://quirktools.com/screenfly/

I am using Justin's Apart theme. I love it except for that thing

Just note, if you set a minimum width make sure to use "view-port" meta tags to render your site correctly on mobile devices:

View-Port Information:
https://developer.mozilla.org/en-US/docs...t_meta_tag

(2013-07-26, 09:53 AM)Jambuster Wrote: [ -> ]Just note, if you set a minimum width make sure to use "view-port" meta tags to render your site correctly on mobile devices:

View-Port Information:
https://developer.mozilla.org/en-US/docs...t_meta_tag

I have tested my theme on my tablet and my Samsung galaxy works perfect. The only issue I have is with chrome! I have an Ad on my header 468px width so Chrome sometimes doesn't load 468px of the home page, I mean everything under the Ad is hidden, but if you refresh the home page everything works great. This problem is only when someone lands on home page on index. Maybe you know how to fix that?

You could create specific css for the device itself using the following, add your normal classes inside, change ".classes-here" to you #conatiner if you want specific css for that or any other classes you want to display differently on your tablet.:

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {

      .classes-or-IDs-here{

      }

}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {

      .classes-or-IDs-here{

      }

}