Responsive design for rich text modules in module groups

[fkistner]

I am working on what should be a pretty simple webpage with 6 boxes arranged in two rows of three about halfway down the page. Each box has an image at the top , then a rich text module with text about a service that the company offers. I did not design the templates. What is there so far looks really pretty, but when I add text to the text modules, it overflows the box and if it's in the top row the overflow slides down under the second row. This is a responsive design issue that shows up even when there's only a little text--resizing the page causes the same overflow. But most importantly I need the boxes to expand and push the next row down the page when I add more text. They do all stack and fit all the text they need to fit when you go into mobile view, which is nice. But they just overlap more and more as you decrease the browser size until you hit that threshhold, which is not nice. How do I keep these boxes from overlapping each other, allow them to continue overlapping the element above them (a big blue image), and make them expand to fit the text inside them? I know css, but not fluently enough to figure this out on my own. (ignore the "learn more" stuff. That's all coming out.)overlapping at the bottom (bad)overlapping at the top (good)

[Dev_TRooInbound · Accepted solution]

Hi @fkistner,

I think the issue in the template is that in CSS you need to remove Fixed height of the block in a row.

If you will send the link of the template, it will be easier to find the bug for responsiveness. And, you get a better solution.

If your problem is resolved, marked it as Solved.
You can also email us for further assistance.

Thank you.

TRooInbound Team
Hubspot COS/CMS Development Agency
w: https://www.trooinbound.com | e: hello@trooinbound.com

[fkistner]

Infrastructure services page template

@Dev_TRooInbound

Does that work? Are you able to access the template if I share the link to it in my design manager? Thank you so much for taking a look! I will also check for fixed height in the stylesheets and try to change that.

[fkistner]

Another question: each module group has a css class: .ser_box, which gives the block it's light gray background and some padding. So that actually stretches with the text. The first question was how to get the second row to move down as that happens. The second is how to get all the light gray backgrounds in each row (or just all of them, if that's simpler) to be the same length, as long as the longest one to accomodate the longest text.

Below is some of the style sheet. As best I can tell, the class .servicebox is not actually used anywhere in the template. the class .ser_block is applied to the second rich text module (the one containing the text) in each block.

.ser_block {

background-color: #f5f5f5;
padding: 5%;
padding-top: 10%;
}

.servicebox {
/*background-image: url('https://cdn2.hubspot.net/hubfs/42222/shubham/homeli1.png');*/
height: 400px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.ser_box {
background-color: #f5f5f5;
height: 56vw;
position: relative;
}