Table Cell Width, different devices, different width.

Hi, In my design, I have a table. The table has cells. There are 4 standard screen sizes that I can select in bootstrap studio. When I select a small (phone device), the cell width is 86px and greyed. When I select a large device the cell width is 296px and greyed.

This is great.

However, if I modify that cell width, it CHANGES FOR ALL DEVICES TYPES. I want to be able to adjust the design for specific device types.. Similar to the adjustment of columns and rows.

What is the mechanism to change the cell width on a specific screen-size layout. It would be intuitive if the changes were only applicable to the design I was currently viewing.


You use CSS media queries for that. The Buttons that you select have nothing to do with any function other than to "show" you what it will look like at that size viewport. It's not a selection screen where changes you make affect only that size, although that would be pretty awesome if it could do that automatically. Have used a couple other builders that did have that built in feature, but they lacked sorely on other features or total lack of updates etc.

You'll need to add some CSS to your custom CSS file to override the settings of whatever styles you are wanting to change. It's very easy to do. Just choose the item you want to change, check the CSS code window to see what CSS is affecting it and copy it to your custom CSS file using the dots to the right of the CSS class which are actually a menu.

From there make the changes you want to see on that size, and then add your media query to tell it that it only is to affect that size. That's all there is to it, it's pretty simple to do.