Two fixed width columns with two flexible columns in the center

Support
#1

Hi there!

Is it possible to have two fixed width columns with two flexible columns in the center?

https://jsfiddle.net/133rr51u/

Thanks a lot in advance!

#2

Hi @Finlando,

Thank you for reaching out to us. You probably can do this with Header Builder in Pro, In your header add Left and Right Bars which are by default fixed and then in the middle you always have flexible columns or content:

If you want this layout on specific pages then you can create a new header with the left and right bars and assign it on specific pages.

Hope this helps!

#3

Hi Nabeel!

Thank You for the quick reply.

I am not talking about Bars. I would like to build this layout with Columns (Content Pro).

#4

Hello @Finlando,

Thank you for the clarifications. Please be advised that the column widths is using percentage and this is why the value varies depending on the browser size. Regretfully we do not have any option to have a fixed width column. It can only be done with custom code. Be aware that custom development is beyond the scope of our support. You may need to ask help from 3rd party developer.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Thanks for your understanding.

#5

Hi there!

Not sure if this is best practice, but I solved the issue as follows…

CSS for the fixed width columns
.x-column {
width: 764px !important;
flex: 0 0 764px !important;
flex-basis: 764px !important;
}

CSS for the responsive/flexible columns
.x-column {
width: 100% !important;
}

Just in case somebody have to place top performing AdSense sizes. :stuck_out_tongue_closed_eyes:

#6

Hey @Finlando,

Fixed widths will always create issues in smaller devices, you can use media queries to avoid such issues if you face in future. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.