I've been working with this for a while now and I haven't had the penny drop nor the light come on which is what I would have expected after experimenting for a good number of hours and reading the documentation.

I understand that things stack but I don't know how to do them as the manual seems to assume some form of prior knowledge and I can't fathom out where I am going wrong. For example I have just entered "HTML Small Hero" into Google to help me understandwhat a Small Hero element is as it's not in the Chapter 5 list and the results from Google don't help me much at all. Am I just plain dense and should stop here now?

There are a few other problems that I have. On my first row I have placed an image in the column (two spans wide) and to the right a Heading 1 which is ten spans wide. I move the slider to the left and the Heading, where the site title is, doesn't change size. If I am wanting to view this on a phone then how do I do this so that it shrinks?

In the past I used to use em rather than pixels and this is what is throwing me here. I seem unable not to use em measurements any more and I presume that's to do with how this works but on the phone or tablet will I want pixels for the text sizes?

The second problem is that I have placed breakpoints on the top and I still can't get the columns to stack. For this I have created a second row (two and ten spans again) and if I slide the slider to the left the row compresses. I would ideally like to have the ten-wide go above the left hand two-wide when it gets to the breakpoint. This is that the left hand two-wide narrow column is a left hand menu list and that can go under the main text (the ten span column).

If I change the 0 spans push or pull to other values then the column block just vanishes somewhere; presumably to the right and off screen.

Clearly I am going horrendously wrong somewhere. I don't know whether it's because I am dense but I would have thought that I would have seen something stack and, hopefully, move around the screen by now.

If anyone can help then I would be grateful. In the meantime I am off to give the documentation another run through.

Malc

Hi Malcolm,
As far as the header shrinking down check your min-width setting.

Ok so if you want your text to shrink at a certain size what you want to do is slide your slider to the left until you get the approximate position where you think it is too big then add a breakpoint. Once you set your breakpoint you can go to the font property of the element, in this case its the Header, and reduce its size. To ensure you have done this correctly slide it back to the right past your breakpoint and you will see it change back to the larger size.

This in general is the whole point of this software. The main thing is to remember if you add a breakpoint and don't change anything it won't automatically change for you. You must readjust at each breakpoint.

Do a search on RLM workflow and I know there are several examples of us explaining the ideal way to use this software. For the sake of ease and because I see that you are putting out some effort I will repeat what I have said to others.

When I build websites with this software I start out with no breakpoints at all, if there are any there I remove them. I build my layout the way I want to see it in full desktop view. Once you have your complete layout done and are happy with how things look start sliding your slider to the left. Pay attention to all your content, if you have to scroll up and down to view it all please do so. If I see something that becomes to squishy, not aligning properly, image becomes too small or anything I don't like I will add a breakpoint. Once I add the breakpoint I will begin to fix everything I do not like, I'll adjust padding, font size, image width, column spans, hide elements I want to disappear until it looks good again. I will then repeat these steps again by moving the slider to the left until it "breaks" again and add another breakpoint and begin fixing everything again. I will keep doing this until i get to the smallest screen size possible.

If you follow this approach you will "future proof" your websites. No matter what size of screen comes out your website will look great.



This question was kinda answered above. What you need to do is add a breakpoint where you want the change to happen then adjust the column spans accordingly. One thing to note is by default things are floating left so columns on the right side will drop down automatically if the total column span is greater than 12. I always keep this in mind when designing my layout. What you are asking this to do is backwards. You want the column on the right to move up and over. This can be done but you would have to manually add a custom.css file to your project and move the columns around there.

My suggestion is keep in mind how the grid system works and design accordingly. I have also achieved this by adding an extra column above and just hiding it on the full desktop version, my slider as far to the right as possible. I would add the exact same element as the one I wanted to move up and over like what you are suggesting here and when it gets to the breakpoint i want it to move I will un-hide the column above and hide the original column.

I hope this clears up a few things for you.

Happy coding

Thanks for these replies. I think that I understand a little better now. I presume that I have to make a new set of CSS rules for each breakpoint. But do I drag and drop forcibly the elements so that they stack at each breakpoint?

If so, how do I know that I can move the slider back to the exact point again? Is there a way to jump or 'click-to' to various breakpoint sizes so that I know that I am working for the correct viewport width and not one that's a pixel more or less either way?

Lastly.. This was a serious question. What is a Small Hero? I've just bought a book on Responsive Web Layouts and I can't find any reference to such an element in there nor in any of my HTML 4 (and earlier books - gulp!). I know what most of the other elements are but this one I can't find in any of my books nor on Google. What is it and what does it do?

Thanks again
Malc

Malc

Ah, the penny has now dropped. Thanks ever so much. It would be helpful if one could see the generated CSS somewhere as the page is being edited so that one can get an idea what's going on (one for the wish list please).

There is a click-to function, as I have just discovered; one can click on the breakpoints themselves. Now, this hopefully is taken as a positive critisism of the documentation by Coffee-Cup, that the documentation really tells one what this tool can do rather than how to do it.

And please, what is a Small Hero? Is this some sort of in-house in-joke or is it a real HTML construct?

Malc

Be adventurous Malc. Add the Small and Large Hero to your page and see what it does. I promise they do not bite.

Tomorrow, Scott. But I shall. It's been a long day and I think that I am going to heavily ignore the advice in the 'No Sweat' template here: http://www.coffeecup.com/help/articles/ … ple-steps/

Cheers (quite literally)
Malc