Any ideas??

[DOchieng5]

I have just become familiar with the repeater items in hubspot and set up a page with some custom modules using this functionality. My issue is that how can i ensure it is responsive. I would like to have 4 modules side by side when viewing on a desktop and then reduce to 2 module across when viewing on smaller screen. 

Thank you for your help!

[LMeert · Accepted solution]

Hi @TitiCuisset, @DOchieng5  ( et bonne année/happy new year 😊),

To ensure your modules do display by 4 on desktop and 2 on tablet and below you'll have to use CSS as this is not something you can solve using HubL.

The best way to do that is to use the css property flexbox on the container, define a desktop width for each child and then use a media query to change the width under a certain breakpoint.

Have a look at this stackoverflow thread, it's got the right code for you !

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

Best,

Ludwig

[wlacteo · Accepted solution]

Hi there! Regarding your concern on making your custom modules responsive, you can try using media queries in your CSS code to adjust the layout of your modules based on the device screen size. You can set a breakpoint where the layout will change from four modules side by side to two modules across. Good luck with your Poquoson Idea  project!

[TitiCuisset]

Hi @DOchieng5 

Thank you for reaching out.

I want to tag some of our experts here - @Anton @LMeert @JBeatty do you have any thoughts for @DOchieng5 on this? 

Thank you!

Best

Tiphaine

[LMeert · Accepted solution]

Hi @TitiCuisset, @DOchieng5  ( et bonne année/happy new year 😊),

To ensure your modules do display by 4 on desktop and 2 on tablet and below you'll have to use CSS as this is not something you can solve using HubL.

The best way to do that is to use the css property flexbox on the container, define a desktop width for each child and then use a media query to change the width under a certain breakpoint.

Have a look at this stackoverflow thread, it's got the right code for you !

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

Best,

Ludwig