Hit a snag with sizing following...

User 2802241 Photo


Trial User
14 posts

Hi - I just wrote this super long post, hit 'Create Thread', and got slapped with an error message and lost everything ... ARGH!
Let's try this again -- I have started using the RSD Trial on Windows 8, 32" HD Monitor. It looks great, but it opens much wider (due to the monitor size) so my default size is 1050px (instead of 850px as per the screens I saw in tutorials)

I am working off of the Kitten Adoption tutorial but have hit a snag. (http://www.coffeecup.com/help/articles/ … -with-rsd/)

I wanted to post this early and have included a 'mock up' of my issue but can provide actual pictures tonight. Basically, when I get to the fourth row I have to add a column with photo, header 3, and paragraph elements. Everything looks great at 850px or below with the settings applied as per the tutorial .. However, when I maximize the preview or expand the window to my screens full resolution, the header 3 and paragraph elements expand slightly larger in width but the image remains the normal size.

I thought this was due to my large monitor but when I downloaded the sample project from RSD I saw that it behaved correctly, even at 1050px, the header, paragraph, and image appeared 'snapped' together and at the same size.

As I said, I will provide actual photos and project tonight but I wanted to hopefully get ahead of this and hear your thoughts. Thanks in advance for any help you may be able to provide!
Attachments:
User 103173 Photo


VP of Software Development
0 posts

Can you attach your upload your RSD project file so we can look at the settings?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2802241 Photo


Trial User
14 posts

Sure Scott - I will attach everything tonight when I get home from work - I had just wanted to put this post out there in hopes that perhaps someone had the same issue and got it resolved. I tried to match up my project and the sample project side by side and compare settings on the row, column, and elements but everything looked to be the same.

I'll post the Project tonight. Thanks.
User 103173 Photo


VP of Software Development
0 posts

What I bet the issue is (but need to see the project) is that you made your styles on a specific breakpoint. What you should do is select the last breakpoint on your project and then move the slider just to the right of that. This is where you start adding your styles.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2802241 Photo


Trial User
14 posts

I haven't gotten to the part in the tutorial where you add break points yet so I don't know how to add them. I only followed what was in the tutorial, but I did move the slider around a bit in the beginning to see how it worked and because I was confused that mine defaulted to 1050 where the tutorials defaulted to 850. I don't know how easy it is to add breakpoints so I don't know if it's something I could have done inadvertently.
User 103173 Photo


VP of Software Development
0 posts

When you attach your project file, we should be able to see what is going on there and get you fixed up.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2802241 Photo


Trial User
14 posts

Also, another thing -- In the demo screenshots (see below) it appears the gray striped background that columns have before you fill them with content expand to the size of columns next to them. So the striped column next to the Call Out column and container is the same height. The same is true for the column between the logo and the Navigation Links.
http://bob.coffeecup.com/storage/tutorial-images/static-responsive/row1-2.jpg

When I download the sample file, or try to recreate this myself, these columns do not automatically snap together. When I download the sample, it does not appear as how it does in the screen shots. There is no black tabular border and the column striped backgrounds maintain their original height and don't automatically match visually in height. On Preview, everything looks as it should though.

I will provide a photo from my view tonight as well to show you what I am talking about.
User 232214 Photo


COO
827 posts

jerry.domenick wrote:
In the demo screenshots (see below) it appears the gray striped background that columns have before you fill them with content expand to the size of columns next to them.

There is no black tabular border and the column striped backgrounds maintain their original height and don't automatically match visually in height. On Preview, everything looks as it should though.


Yep, that's correct...and done on purpose :P

In the box where you downloaded the example file I mentioned that the borders were added for illustrative purposes, making the tutorial easier to follow and continuing the spreadsheet analogy. They are not part of the actual design. The same is true for the height (although I did not mention it there, I will update that).

Thanks for the eagle eye and reading/following this article!
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2802241 Photo


Trial User
14 posts

Bob Visser wrote:
jerry.domenick wrote:
In the demo screenshots (see below) it appears the gray striped background that columns have before you fill them with content expand to the size of columns next to them.

There is no black tabular border and the column striped backgrounds maintain their original height and don't automatically match visually in height. On Preview, everything looks as it should though.


Yep, that's correct...and done on purpose :P

In the box where you downloaded the example file I mentioned that the borders were added for illustrative purposes, making the tutorial easier to follow and continuing the spreadsheet analogy. They are not part of the actual design. The same is true for the height (although I did not mention it there, I will update that).

Thanks for the eagle eye and reading/following this article!


Thanks for confirming - I probably should have caught this - What I did was I read through the entire thing twice early last week when I downloaded the trial and then I went through it a third time, last night, and actually started doing it alongside the tutorial. Unfortunately, I skipped the text in the box where I downloaded the sample file last night :)

I will post my file when I get home to see if you guys can help me figure out why my header and paragraph keep extending! Thanks again for your continued support guys - Very impressed with how responsive you are.
User 2802241 Photo


Trial User
14 posts

Hi - I got home late last night and was not able to upload my screenshots, but is it okay if I raise a few general questions here in the meantime?

1. Once a site is complete, is it possible to export the CSS and HTML of that site and passed it off to a client who does not have/utilize RSD? Can they continue to make updates to the HTML or CSS outside of RSD?

2. Does RSD compatible with all / most of the other Coffee software? I am considering purchasing the big bundle for $299.99 - Will this allow me to create Menus, Forms, and Shopping Carts with the appropriate Coffee software and easily import them into my RSD website / project? --- Will all of the Menus, Forms, Carts, etc. be available for export and use by a client without these programs?

Thanks in advance!

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.