The Grid Breaks at higher resolutions

User 315488 Photo


Registered User
90 posts

I can not figure out how to make this work when the layout / web site is viewed on a larger screen.
I have a screen that is fairly moderate by modern standards at 1600 x 900 resolution.
I can't figure out how to make the layout work at larger than about 1100 px because that's as big as RLM allows me to design for. I actually want the layout to just be centered in the screen from 1024 px on up (max-width=1024px), but it doesn't work.

I've tried following the example and advice in this post:
http://www.coffeecup.com/forums/responsive-layout-maker/why-does-the-grid-break/

As far as I can tell, I've done the same thing but it still breaks above about 1100 px.
Here's an attachment of my file. I was just following the tutorial, but it doesn't work. What is wrong?
Attachments:
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Remember break points are for when the site goes out of whack. Only add them to reposition content to look correct at the current screen size. Try setting the max width for the grid instead of using auto.
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 315488 Photo


Registered User
90 posts

I looked at it and saw that all the rows had a max width, but the grid did not.
So, I set the grid to the same max-width that the rows have, but it still breaks.
I thought I had followed the help instructions here:
http://www.coffeecup.com/help/articles/chapter-6-a-responsive-layout-design-in-9-steps/
But my results were different.

Then, I started over and doing exactly the same thing (as far as I can tell), it seems to work fine.

I think there may be one issue that caused this - I inadvertently added a break point at the widest width in the designer (1099px on my computer). As far as I can tell, that's the only difference. Would that make it break?
User 315488 Photo


Registered User
90 posts

OK, I found out what the problem was:

I was adding a breakpoint at 1024 or 1100 px. That would break the layout for anything larger than that. I would have to scroll the slider past where I could see it and try to edit the content to get it working again.

Do NOT add a breakpoint at the top end of your design or you will be messing with problems like I had. Put your first breakpoint at the spot where you need it to change from the full size layout.
You can control the max width by setting it to different values. If I set the max width at 1600, but don't put in a breakpoint until it starts to be a problem at lower widths, then the layout is centered at all sizes of 1600 and up. It took me a while to figure this out. Hopefully, this may help someone else.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Yes I think users are confused about break points. Don't add any to your site until you need them. The ultimate goal for me is to use a few as possible and still have the site respond and look good at the same time.
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 1834079 Photo


Registered User
3 posts

I'm having the same problem. I don't think I added a breakpoint but when I scroll in RSD past 1099, the formatting is lost. I have a breakpoint at 930 and 2-3 smaller than that. What is the specific fix?? Thanks

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.