grid issue? - Post ID 244763

User 515127 Photo


Registered User
116 posts

I have this strange thing where the export index.html version explodes when I view it on my monitor full screen. However, if I shrink the viewport to 1500 or so, it looks about like I would expect it to. As a novice with responsive pages and with Responsive Layout Maker Pro - I'm probably overlooking the obvious here? FWIW - my system has dual 1080i monitors - 1920x1080 resolution.

By explodes - I mean the page loses a lot of the formatting - just guessing but it looks as if a large chunk of the CSS is crashing / being ignored. What I think is happening is that the RLM default layout CoffeeGrinder DPP can't handle 1080i resolution and it started gagging past 1571 px?
User 38401 Photo


Senior Advisor
10,951 posts

Hiya gl,

Let me first ask the obvious question. Did you put a setup for past (to the right) of the first breakpoint on the right side? In order for larger screens to view everything correctly you need to make sure you have done your settings outside of the actual breakpoints as well as within them. Many people aren't aware of this and they tend to put the slider right on the first breakpoint on the right thinking that's the starting point when it's actually to the right of that first breakpoint on the right.
User 10077 Photo


Senior Advisor
1,095 posts

gllincoln wrote:
I have this strange thing where the export index.html version explodes when I view it on my monitor full screen.

Having grown up watching Bugs Bunny, this phraseology leads me to grin as I envision a Wile E Coyote experiment.

Do you have a link so that where we can see what's happening?
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including training for Site Designer and Web Form Builder via Zoom.
Email me at support@usconsumernet.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2088758 Photo


Senior Advisor
3,086 posts

I would have to agree with Jo Ann here. I really do think you have a hidden breakpoint on the far right and you started designing your website just inside of that.

I would really like to see an option to view all breakpoints and adjust each by pixel if needed. The slider is great but sometimes I find myself sliding back and forth just to get it exactly where i want it. Further more if we had a setting/toolbar that would let us see every breakpoint things like the issue above would become obvious.

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

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


Registered User
116 posts

Hi Jo Ann - I don't know what you mean?
"you put a setup for past (to the right) of the first breakpoint on the right side? In order for larger screens to view everything correctly you need to make sure you have done your settings outside of the actual breakpoints as well as within them. "

This is probably what is happening but I don't understand what this means.

I've put up a test host... http://cctest.usq.me/ so you can see my Wiley Coyote website.
User 2088758 Photo


Senior Advisor
3,086 posts

Hi Gllincoln,

You have a breakpoint set at 1576px. Did you try to move your slider to the right of that? I would guess that you started laying out your website inside of that breakpoint. What you need to do is slide to the right of the last breakpoint and fix your layout.

Hope that makes sense.

Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

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


Senior Advisor
20,181 posts

Or this if needed.
http://www.coffeecup.com/forums/respons … post243627
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 515127 Photo


Registered User
116 posts

Thanks to the help I received, I was able to fix my Wiley Coyote page. I still have lots to learn about responsive site design, css, and the RLM tool. I ended up rebuilding the page, created a break point out around 2000 px as my first step and then stacked the rows/cols/elements and it came together. Looked at it full screen 1080i and with a bit of minor tweaking, I think it will be acceptable. It's not Da Vinci or Van Gogh but it's usable.

Regards,
Gordon



User 2088758 Photo


Senior Advisor
3,086 posts

Hi Gordon, I still think you are missing the point. As future practice for website design you should do the following.

Open new project. Make sure there are no breakpoints at all. Design your layout the way you want it to appear at full screen.

Then start moving your slider to the left until the layout breaks. Add a breakpoint. Adjust your column spans and styling until it looks good again.

Then start the process again by moving your slider to the left until it breaks again. Add a breakpoint. Fix it up and repeat this process until you are at your smallest size.

Usually I use around 3-5 breakpoints max.

The whole point to this response is there should be no breakpoints at the starting point of your layout. All breakpoints should be to the left of you first layout design.

Hope this provides more insight for you.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

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


Registered User
116 posts

Steve wrote:
Hi Gordon, I still think you are missing the point. As future practice for website design you should do the following. Open new project. Make sure there are no breakpoints at all. Design your layout the way you want it to appear at full screen. Then start moving your slider to the left until the layout breaks. Add a breakpoint. Adjust your column spans and styling until it looks good again. Then start the process again by moving your slider to the left until it breaks again. Add a breakpoint. Fix it up and repeat this process until you are at your smallest size.


You are absolutely correct. - When I initially started working with RLM it (by default)) started with a layout that included some break points - right hand one was 1571 or something like that. In any event, I went with that and subsequently my site style sheet based settings virtually disappeared at 1080i.

If I create a site without breakpoints, then start working it down - am I correct in assuming that a new css sheet based on a viewport of the breakpoint size is created that only includes the changes I make - but all of the elements remain? In other words, I can adjust element style properties but I cannot add or delete elements? Can I create new rows/move an element from say... the top row to a new second row? Or add an element set to display:none and have it convert to a display mode after a certain viewport size has been reached?

Lastly - can I delete elements or add elements or replace elements (for example insert a different size version of a graphic) depending on breakpoint? Am I correct in assuming (as of this date) that the breakpoint is a visual reference that translates to viewport min or max width settings in a style sheet?

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.