Responsive text boxes

Dear Community, 
on a website, I want to build something like this:
3 color boxes with text describing services. 
The fields are all the same size, regardless of the text length. Text and boxes are responsive, as in the video below. 
I am using Squarespace 7.1 and I despair 🙂

Who can help?

This sounds achievable. What are you having problems with? Do you have a page that you're building this on that you could share to show what isn't working as you want it to?

Hey Ziggy,
thank you very much for your swift reply.
I'm a real noob - sorry to bother.

I have two problems:

• my text is distributed regularly and does not lie on top of the boxes. I assume that this is due to the "justify-content".
• the boxes do not stack from a certain screen size

This is my CSS so far:

Quote

/*Test responsive Felder*/
#container-test{
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
}
#textbox-1 {
  position: relative;
  width:100%;
  height: 100%;
  margin: 0 20px;
  background-color: #9C98FC;
  opacity: 0.6;
  border-radius: 25px;
}
#textbox-2 {
  position: relative;
  top: 5%;
  width:100%;
  height: 100%;
  margin: 0 20px;
  background-color: #98FCCE;
  opacity: 0.6;
  border-radius: 25px;
}
#textbox-3 {
  position: relative;
  top: 10%;
  width:100%;
  height: 100%;
  margin: 0 20px;
  background-color: #000000;
  opacity: 0.6;
  border-radius: 25px;
}
.text-headline {
  position: relative;
  top: 5%;
  left: 1%;
  right: 1%;
  width: 100%;
  height: 100%;
  font-family: Matter-bold;
  font-size: 20px;
  line-height: 1.4;
}
.text-body {
  position: relative;
  top: 5%;
  left: 1%;
  right: 1%;
  width: 100%;
  height: 100%;
  font-family: Matter-light;
  font-size: 18px;
  line-height: 1.4;
}

and my HTML:

Quote

<div id="container-test">
    <div id="textbox-1"></div>
  <div class="text-headline">My first Headline</div>
  <div class="text-body">My first body</div>
    <div id="textbox-2"></div>
  <div class="text-headline">My second Headline</div>
  <div class="text-body">My second body</div>
    <div id="textbox-3"></div>
  <div class="text-headline">My third Headline</div>
  <div class="text-body">My third body</div>
</div>

If you're using 7.1 with fluid engine, text blocks can have a background, or you could use a shape as a background and avoid all of the coding...

You would need this to stack on mobile:

@media only screen and (max-width:749px) {
  #container-test{
    flex-direction: column;
  }
}

42 minutes ago, Kwakk said:

my text is distributed regularly and does not lie on top of the boxes. I assume that this is due to the "justify-content".

Not sure what's happening here. Can you share the page you are testing on?

Thank you so much!

I get weird results, when I use shapes as a background - they do not stick to the text. 
As for the background, my problem is, that the size depends on the text. And I want the same size for all the blocks ... 

24 minutes ago, Ziggy said:

Not sure what's happening here. Can you share the page you are testing on?

This is the website I'm working on: chorborn.be (Pass: ChorBorn_Pr0be)

You are my hero! Thank you very much for your help @Ziggy!

Happy to help!