Repeating items with responsive design

Develop, Build & Integrate CMS Development
1

Hi

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 2 modules side by side when viewing on a desktop and then reduce to 1 module across when viewing on smaller screen. I have provided a link to the page below.

Thank you for your help!

http://www-eurobase-com.sandbox.hs-sites.com/management-team-group?hs_preview=MZtTJJXZ-6028176292

2

@Matt1986,

you will need media queries.

Please refer to the pen i made for you with your last question.

I think i kind of answered this question in the other question you had.

.member-repeater-super-wrapper{ display: flex; flex-wrap: wrap; /* dont forget vendor prefixes! */}.member-repeater-wrapper{
 width: 50% /*if you want more, divide the space /*
}

@media (max-width: 500px){
 member-repeater-wrapper{
 width: 100%
 }
}
3

Hi
Thanks for your reply. I understand that I can change the width 100%, 50%, 33% and 25% to change the number of modules across to respectively 1,2,3 and 4. I was using this technique with media queries to control responsiveness before. However this fixes the custom module to a certain number across. So I will then need to create different custom modules for 1,2,3 or 4 across. I thought the purpose of the repeater functionality was to create more flexible. E.g I can create one custom module that can be 1,2,3 or 4 across, but if I specify the width (e.g 50%) I then I lose this flexibility as it will need a module with a maximum of 2 across.
Am I missing something. Can I create a custom module which uses the repeater functionality to create flexible but also allows for responsiveness with media queries?
Thank you for you help with this
Kind regards
Matt

4

Hi @Matt1986,

If i am understanding your question correctly, you are saying that sometime you will want to have two across, sometime four etc.

so

row 1 has 2 items

row 2 has has 4 items

you could add a choice field in the module with the possible numbers and have the value be added as a class to member-repeater-wrapper. then add styles for each if the classes.

for example:

you choose 2. this would do

<div class="member-repeater-wrapper two-members"></div>

then have in the css

.member-repeater-wrapper.two-members{
 width: 50%
}

then would add your two members.

Hope this is leading you in a useful direction!

5

Thanks

Is there a way to create a min-width to the custom module. So when the custom modules get to a certain width (regardless if they are 1, 2, 3, or 4 across) they are then pushed down to the next level. I have tried doing this without success.

Sorry for all my questions, i just feel that this is really important to grasp. I will probably be using his techique quite a lot across the website.

Thanks, once again.

6

@Matt1986, i dnt quite understand the question.

when browser increases to a certain width, they are pushed down to the next level? Can you be more specific?

Thanks,

d

7

Hi

Maybe i’m confusing myself now :slightly_smiling_face:

i’ll try explaining with an example. say i set the custom module with a min-width to 400px and i add 3 repeater modules, so 3 modules will be side by. If the screen width is larger than 1200px, there will still be 3 in a row. between 1200px and 800px there will be 2 and below 800px there will be 1 in a row.

If you think this wont work, then could you explain in a bit more detail how i would achieve this with your first suggestion above. Apologises and i thank you for your time. it is apreciated!

8

@Matt1986,

you had a contradiction in that last message. you say at 400px you want 3, but you also say below 800px you want 1. if the 400px was a mistake, this would be the css

.member-repeater-wrapper{
		width: 33%;
}
@media (max-width: 1200px){
	.member-repeater-wrapper{
		width: 50%;
	}
}
@media (max-width: 799px) {
	.member-repeater-wrapper{
			width: 100%;
	}
}

hope i understood :slightly_smiling_face:

9

Hi

400px is the width of the module, not the screen. So if the screen width is between 400-799px there will only be enough room for 1 module. If the screen size is between 800-1199 then there will only be enough room for 2 modules in a row. If the screen size is larger 1200px, then at least 3 modules can fit in a row.

so can I use min width in this way to make the module responsive?

cheers

matt

10

@Matt1986, gotchya

I modified this pen.

see what you think

d

11

Great, thank you. sometimes explaining issues thtough forum just makes it a whole lot harder :slightly_smiling_face:

Just one last query. is it possible to make sure that the modules are centered, rather aligned to the left.

thanks

12

@Matt1986

updated same pen :slightly_smiling_face:

add

justify-content: center;

to the container.

make sure to get vendor prefixes into your code

13

prefect, thank you!!

you are legend :). i do appreciate you sticking with this and helping me out. I would buy you a beer if i could.

thank you again.