Hello,

I am new to RSD, recently purchasing RSD 2 version 2087. I am a fossil who started designing web sites using Freeway Pro many years ago. The best thing about softpress going under is that it opened my eyes as to how far responsive site design has progressed and that I needed to learn a great deal in order to catch up. After much research I finally decided on purchasing Coffeecup software to continue my hobby, I believe it was the right choice. I went through all of the published "manuals" and the tutorials (twice) and thought I was prepared to start my first sight. But, there are obviously subtle things I missed as the first two things I tried to layout are not working. I know I will get the answers on this forum, I just wanted to let everyone know that I will probably be posting many simple questions.

First issue; I created a top row with a background colour a container and a heading, it stretches across the entire screen at all breakpoints. I would like to fix this row at the top of the screen, so the rest of the page scrolls underneath it. I thought all I had to do was to change the position from "static" to "fixed". However, when I do this the row shrinks in width so only the heading elements are visible and the row below moves up. I have played with the various settings in attempts to get what I am after but nothing seems to work. Any recommendations would be much appreciated.

Second issue; my second row has an image background that I would like to scale proportionally with screen width (I have only started working on the lowest breakpoint). I created a jpg with a 4:1 ratio, it has a size of 640px X 160px. I cannot get the row to size proportionally within the lowest breakpoint. The height remains fixed not matter what I set the row dimensions.

Hope that my descriptions and understandable. I have posted my site, the url is:
http://verntest.coffeecup.com/index.html

Vern

Hi Vern,

Can you post a like to your file so I can take a look it for you?

Thanks

Hi Scott,

I would to provide a link to the file, how do I do that?

Vern

Just upload it to Dropbox then provide the link to it.

Sorry, so obvious.

Here is the link:
https://www.dropbox.com/sh/9epzq82r2pj1 … czrba?dl=0


Vern

Vern,
Set the top row to position fixed, and also go to the dimensions, where it says 'width auto'. Change auto to 100%.
When a row is fixed, the next row disappears underneath it. Give the second row ample top margin so that it comes clear of the 1st row.

Regarding the image: It might be better not to use it as a background image, then the dimensions change according to the viewport. You had a max and min height, and that means that the image will get wide, but you see less and less of it the wider the viewport.
If you add it as an inline image, the proportions can easily be kept. Check out what you think of this:
https://dl.dropboxusercontent.com/u/109 … SD%201.zip

A piece of good advice: don't use spaces or uppercase in file names. Valley Child should be valley-child and so forth.

Thank you Inger for solving my first issue.

I half remember having to set the width to 100%, or some setting to something, when fixing a row, but couldn't find the tutorial or instructions of where I saw it. I played quite a bit with things, just never happened to find the solution.

I didn't realized that the row following fixed row moves up.

I also didn't think a would receive such a prompt response, especially on the weekend. Very much appreciated.

Vern

Thanks again Inger, you solved my picture issue.

I originally tried to use an inline image but couldn't get the picture to expand to the entire width of the row. I searched through RSD articles to find a solution. All I found was a recommendation to use a background image to fill the row. I guess the answer was to set the width dimension to 100%

It was thoughtful to add your advice on file names.

Vern

Glad I could help

What I did with the image, was setting max-width to none, and then I removed the padding from the column it's sitting in.