Column heights changing as the text...

User 2023679 Photo


Registered User
141 posts

Working on a redesign on my website with RLM and it's been going pretty well so far. I just ran into an interesting problem however. This showed up when I replaced the placeholder text (Lorem ipsum dolor sit amet, etc.) after exporting. If you go to the page I'm working on . . .

http://brosepianoservice.com/

. . . it involves the section just above the footer that has the 3 colored columns (purple, blue and green). There is a text box in each column, with each having about the same amount of text. Here's the problem. As you start making the browser smaller (you might have to move it slowly to see it), and the columns get narrower, and thus the text boxes get narrow, the number of lines of text changes, which forces the bottom of the column to get longer or shorter and the columns are no longer even across the bottom.

Any easy way to keep it from doing this or a good way of dealing with this type or situation? I guess I worry too with this also happening if people change the font or text size in their browsers. Not sure if I am not laying things out correctly in RLM or if it's just my CSS ignorance showing up. :rolleyes:
User 187934 Photo


Senior Advisor
20,188 posts
Online Now

You must have figured it out because they all look the same to me.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
3,086 posts
Online Now

Yup looks that way when I checked it this morning too.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2023679 Photo


Registered User
141 posts

I increased the min height on the columns and that seemed to make it better. I can't get it to do it on Chrome. Does it just a little bit on IE11 yet, but yeah barely noticeable. It is most prevalent on Firefox (I'm using version 29.0.1). I can still get it to do it on there. It shows up on FF on the mobile test for Google Nexus 7. . .

http://mobiletest.me/google_nexus_7_emu … rvice.com/

The middle column is shorter than the outside columns when I view it there.

Maybe I should try increasing the min height a little more and see if that fixes it on FF and the little bit that's left on IE11.

User 2484360 Photo


Registered User
3,293 posts

That is correct. You would need to increase the column height for that breakpoint so that all the text fits well. You want to give it about 25px of breathing room for the different browsers, but you are on the right track! :) Remember to clear your cache if you are not seeing published changes.
User 2023679 Photo


Registered User
141 posts

Thanks Adam! Yeah, I didn't check so carefully at the different breakpoints as I should. Still working on getting the old brain to think responsively! :P Getting better at it though with all the help on here. Thanks for the tip on the breathing room and the cache.

Thanks guys for taking the time to check on this for me!
User 434929 Photo


Ambassador
938 posts

padding issue download to view this file size.mp4

Click on above link I made a video to show you where you have messed up, you got download and view video

You have kinda messed up with padding at that break point.
Guys at coffeecup are awesometacular.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.