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

BindTuning logo
Copyright Ⓒ 2021 Bind.
All rights reserved.
Privacy Policy
Cookie Policy
BindTuning
              Linkedin BindTuning Twitter BindTuning YouTube BindTuning Instagram BindTuning
              Facebook
Powered by Zendesk