Content overlapping issues

To comply to HTML best practices, and guarantee mobile support, all our themes are developed using absolutely NO TABLES. When in content areas, divs do not behave as table cells, and do not expand their width when content is larger than a pre-defined div width.
Some approaches are possible, to address this issue.

Increase page width

You can increase global page width to accommodate all content items. This can be done by adding the following code to the bottom of the theme's .css file:

@media (min-width: 1200px) {
    .container, .navbar-fixed-top .container { width: 95% !important; }
}
.IE7 .container,
.IE8 .container { width:95% !important; }

Set tables not to expand

For this approach you can try adding the following code to the bottom of the theme's .css file:

table.ms-listviewtable { table-layout: fixed; }

Add horizontal scroll

Add the following css instead, to set content area to have a horizontal scroll

@media (min-width: 992px) {
    #bt-content { overflow-x:auto; }
}
Have more questions? Submit a request

Comments

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk