Tips to Convert Table Layout in NetSuite Site Builder


Having a responsive design is a crucial element of any ecommerce website. A design that can fit into any screen and rearrange the elements (CTA buttons, other actionable items) to show what really matters to the user. A static, impassive design can pull you down and you will definitely be the last one in the game.

When you are building a site on NetSuite Site Builder several elements of your template will be in table format. Most often you rely on HTML elements that are tables and develop a design that works perfectly for Desktop viewport sizes. However, when the user gets into a different screen resolution, say; 1024 px or under range, the table rows and cells become non-responsive to the viewport window. What to do in such cases.

As a quick and fast solution for the situation, use the following styles in CSS stylesheet to set the tables with a better responsive nature:

@medi_a only screen and (max-width : 1024px) { #div__body { table { border-collapse: unset; tbody { td { display: inline-block; } } } } }

This makes the design and the elements automatically rearrange appropriately according to different screens or when the window begins to touch elements on the page.