Jump to content
Go to solution Solved by Ziggy,

Recommended Posts

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?

Edited by Kwakk
Misleading title
Link to comment
  • Kwakk changed the title to Responsive text boxes
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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>

 

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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)

Link to comment
  • Solution

The issue that you're having is in the HTML, within the container <div> you have nine individual <div></div> which are arranged in a flex grid. If you want the text on the coloured background it needs to be contained inside that <div>. More like this:

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

I would probably not use <div> for the text, but rather headings or paragraph tags:

<h3 class="text-headline"></h3>

and

<p class="text-body"></p>

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.