Repeating items with responsive design

[Matt1986]

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

[dennisedson]

@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%
  }
}

[Matt1986]

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

[dennisedson]

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!

[Matt1986]

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.

[dennisedson]

@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

[Matt1986]

Hi 

Maybe i'm confusing myself now 🙂

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!

[dennisedson]

@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 🙂

[Matt1986]

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

[dennisedson]

@Matt1986, gotchya

I modified this pen. 

see what you think

d

[Matt1986]

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

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

thanks

[dennisedson · Accepted solution]

@Matt1986

updated same pen 🙂

add

justify-content: center;

   to the container.

make sure to get vendor prefixes into your code

[Matt1986]

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.