topic Any ideas?? in CMS Development

Any ideas??

DOchieng5 — Thu, 22 Dec 2022 20:54:52 GMT

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!

Re: Any ideas??

TitiCuisset — Tue, 03 Jan 2023 13:40:23 GMT

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

Re: Any ideas??

LMeert — Thu, 05 Jan 2023 08:36:57 GMT

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

Re: Any ideas??

wlacteo — Thu, 23 Mar 2023 14:51:40 GMT

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!