table stacking for mobile - Pagebuilder

You don't have any styles associated with "stack-column-center". You do have an inline style under /*Call Center styles*/ for table cells - which is a problem.

td, th {<br /><br/>    display: block;<br /><br/>}


So that makes the content and sidebar cells act like block level elements. Which means they stack.


So get rid of that. However, presumably this was a style that does something elsewhere. So if removing it breaks other things, then I'd add this style instead.

td.stack-column-center { display: table-cell; }


So a regular/general TD is styled as a block, but here we say that TDs with this specific style are treated as table-cells. (The td.stack-column-center is more specific than just td, so it wins.)


Then under that I would put in a media query to handle the mobile layout. Media queries are like conditional styles. They kick in when the condition in the parens is met.

<span>@media </span>(max-width: 1024px) {<br /><br/>    td.stack-column-center { display: block; width: 100% !important; }<br /><br/>}


This means that from width 0px to 1024px, make them a block and 100% wide. But for bigger than 1024, use the regular/existing styles (which we made into a table-cell.)


BPM