Column arrangement on ipad

[Sevi603]

Hi there — within the page editor there is a way to toggle to mobile preview and adjust the column widths, padding, etc. There unfortunately isn't a way to preview ipad/screen size up to 1240px directly within hubspot (you have to use inspect mode/dev tools in a preview window).

If I have two custom modules in a drag and drop row (span 8 and span 4), what is best practice for getting them to stack on devices screen sizes up to 1240px? I can edit the CSS of each individual module or the main CSS; should I target the hs module id in the master CSS?

[Anton · Accepted solution]

Hey @Sevi603, 
it really depends on the theme you're using. 
Assuming that most themes are build upon the HS boilerplate(which is not bad, but is lacking a lot of responsive stuff as it's an own version of Bootstrap 2) I'd recommend to create a reusable section for your layout as they allow you to add custom classes which will make your life easier. Another option would be to create a custom module with your custom layout and custom CSS as this gives you the most flexibility.

Also, I wouldn't suggest to target the hs_module_id as it might change on every page. So if you add something like 

#module_SOME_RANDOM_ID{
some:css
}

to your CSS it might work only on one page. This is why I'd recommend to create reusable sections as the class stays the same.

best, 

Anton