# Repeating items with responsive design

**URL:** <https://community.hubspot.com/t/repeating-items-with-responsive-design/10885>\
**Category:** CMS Development\
**Created:** [November 10, 2018, 6:29pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885 "2018-11-10T18:29:21Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 10, 2018, 6:29pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/1 "2018-11-10T18:29:21Z")

</div>

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](http://www-eurobase-com.sandbox.hs-sites.com/management-team-group?hs_preview=MZtTJJXZ-6028176292)

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 11, 2018, 12:54am UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/2 "2018-11-11T00:54:42Z")

</div>

@Matt1986,

you will need media queries.

Please refer to the [pen](https://codepen.io/billyoncetoldme/pen/gQaRvy) i made for you with your last question.

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

```auto
.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%
 }
}

```

---

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 11, 2018, 11:58am UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/3 "2018-11-11T11:58:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 11, 2018, 7:03pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/4 "2018-11-11T19:03:26Z")

</div>

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

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

```

then would add your two members.

Hope this is leading you in a useful direction!

---

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 12, 2018, 10:50am UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/5 "2018-11-12T10:50:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 12, 2018, 7:53pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/6 "2018-11-12T19:53:04Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 12, 2018, 8:08pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/7 "2018-11-12T20:08:10Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 12, 2018, 8:29pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/8 "2018-11-12T20:29:42Z")

</div>

@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

```auto
.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 🙂

---

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 12, 2018, 8:43pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/9 "2018-11-12T20:43:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 12, 2018, 9:31pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/10 "2018-11-12T21:31:18Z")

</div>

@Matt1986, gotchya

I modified [this pen](https://codepen.io/billyoncetoldme/pen/gQaRvy?editors=1100#0).

see what you think

d

---

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 12, 2018, 9:34pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/11 "2018-11-12T21:34:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 12, 2018, 9:43pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/12 "2018-11-12T21:43:01Z")

</div>

@Matt1986

updated same pen 🙂

add

`justify-content: center;`

to the container.

make sure to get vendor prefixes into your code

---

<div class="post-metadata">

**Author:** ![Matt1986](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/matt1986/32/48165_2.png) [@Matt1986](https://community.hubspot.com/u/Matt1986)\
**Post date:** [November 12, 2018, 9:46pm UTC](https://community.hubspot.com/t/repeating-items-with-responsive-design/10885/13 "2018-11-12T21:46:09Z")

</div>

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.