Responsive design for rich text modules in module groupsSOLVE
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.)
Solved! Go to Solution.