Why does the content in Mobi theme changes in different monitor size

The Mobi have a responsive framework. So the content react to the view port/monitor size.
You can choose to turn off the responsive function so the content area will remain static no matter what monitor size you are using.
1) Click into “design” and into “edit html/css
2) Open the CSS editor by clicking on “main_style.css” located on the top left hand column
3) Locate this code:
#content {
  • min-height: 700px;
  • height: auto!;
  • padding: 35px 15px 15px 0px;
  • margin-right: 25px;
}

4) Add a width code that fixed the width of the content

width: 850px;

The final product will look like this:

#content {
  • width: 850px;
  • min-height: 700px;
  • height: auto!;
  • padding: 35px 15px 15px 0px;
  • margin-right: 25px;
}
5) Save & Exit
Please note once the responsive width is turned off, the width of the content area will look different. If you have a large monitor, the content area will look shrunken. If you have a smaller monitor, the content will either be a perfect fit OR a horizontal scroll bar may appear.

Tags: