Currently, I am working on coding a website with a non-responsive navigation system. The primary layout structure is based on Flexbox for column and positioning arrangements. The website displays perfectly in Firefox, Chrome, and Edge browsers, showcasing a well-organized 4-column layout in various sections such as Intro, cities, testimonials, and pricing.
However, upon opening the site in IE(11), an issue arises where it only shows 3 columns instead of the designated 4 in certain sections. Additionally, the pricing section only displays 2 columns rather than the intended 3.
I have attempted to rectify the problem by removing the column padding, which does show the correct number of columns without padding. Furthermore, I ensured that the columns have the 'box-sizing: border-box' attribute applied and utilized autoprefixer to prefix all necessary CSS3 properties.
Despite these efforts, the issue persists. If you would like to view the website for yourself, please follow this link:
You can also access the code on Codepen via this link: https://codepen.io/anon/pen/KYqVwY
.grid {
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.column {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.bigger { -webkit-box-flex: 2.5; -ms-flex: 2.5; flex: 2.5; }
.halves .column { -webkit-box-flex: 0; -ms-flex: 0 1 50%; flex: 0 1 50%;}
.thirds .column { -webkit-box-flex: 0; -ms-flex: 0 1 33.3333%; flex: 0 1 33.3333%;}
.fourths .column { -webkit-box-flex: 0; -ms-flex: 0 1 25%; flex: 0 1 25%;}
.fifths .column { -webkit-box-flex: 0; -ms-flex: 0 1 20%; flex: 0 1 20%;}
.sixths .column { -webkit-box-flex: 0; -ms-flex: 0 1 16.6666%; flex: 0 1 16.6666%; }
.sevenths .column { -webkit-box-flex: 0; -ms-flex: 0 1 14.2857%; flex: 0 1 14.2857%; }
.eights .column { -webkit-box-flex: 0; -ms-flex: 0 1 12.5%; flex: 0 1 12.5%; }
@media (max-width: 900px) {
.grid { display: block; }
}