floating custom modules with height auto

Develop, Build & Integrate CMS Development
1

Hi

I have created a custom module to add staff photos on our website. I have used float left and given a width of 50%, allowing me to add extra staff photos easily in the future.

My issue is that i would ideally like the height of the module to be auto, so allowing for different staff description lengths below the image. However when i do this not all the custom modules always float to the left as the custom module above is blocking it.

This there a way around this issue?

I have provided a link to the page below

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

Thanks, i really appreciate any help!

Matt

2

hi @Matt1986,

I would consider creating a new custom module and take advantage of the repeater functionality. you wouldnt need that jquery script and you wouldnt have that repeated css in your document.

the float is performing how it is intended to perform. you will need a height to make it do what you want with a float. I would recommend a flex container. I wrote it out for you here

here is a read on the repeater functionality

good luck out there,

d

3

Thank you! I really appreciate your help on this.

For the time being i have just created a new custom module with display, inline-flex.

however i will look into the reapter functionality i wasn’t even aware of this

thanks again!

Matt

4

Hi

Thanks for your reply. I have now begun use the repeater functionality. howveer i’m struggleing to get the repeating object to fit side by side without the float: left and a fixed height. How can i make that when i add another repeater item, that it is added to the side rather than below.

i have provided a link to the page. the first 3 staff photos are the new repeater elements.

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

thank you!!

5

Hi @Matt1986,

a few things that you should do to make this sing

1) to member-repeater-super-wrapper, apply flex-wrap. if you dont have this, they are going to continue to stay on the same row.

2) the width of member-repeater-wrapper should be 50% (if you want two per line) or 33% (if you want 3 per line) etc

3) for older browser compatibility, make sure to add vendor prefixes. I often paste my code into here for autoprefixing