I have got my website all laid out the way I want it. Now, I am trying to place the benchmarks and change the layout so that the site looks good on different sized screens. I am confused about a few of things.

First, when I reposition the slider to simulate a smaller screen and then make changes when the site starts to look too cramped, I run out of benchmarks before I get down to the smallest screen size. Are there some main screen sizes that I should make sure I get right and others that are less important?

Also, when I get down to the really small screens I wanted to change my heading so that the three words in the heading are each on a different line rather than all on one line. However, this change changed the heading on all the other screen sizes as well. And on the smaller screen sizes I decided to delete a couple of pictures that weren't as necessary but then it deleted them from the whole site. Is there anyway to make these kind of changes for the small screens but not have them also affect the way the site looks on the large screens?

Finally, how can I, or can I, preview how the site will look on a smaller screen without using a different device that actually has a smaller screen? In other words, can I preview how my site will look on smaller screens while using my laptop?

Thank you.

Hi,
You can set as many break points (what you call benchmarks) as you want. You create a new one by positioning the slider where you want it, and then click the + sign on the left. Don't bother about specific screen sizes, just make your contents look good.

About the header: We would need to see how you have created it for large screens, so please zip up your .rsd file and post it here.

Images, when deleted, will disappear from all screen sizes. Instead you make them invisible where you don't want them, by setting display to none.

There are various websites out there that simulate different screen sizes. Here is one: http://www.mobilephoneemulator.com/

Hi Jocelyn,
Using break points to fix how your site looks at various screen sizes is a standard practice but you really need to think about your layout ahead of time so you don't need to use a break point for minor issues.
As far as deleting elements at lower break points that isn't the proper operation to take. What you want to do is set elements to display:none so their hidden from view and not a part of the display.
For the heading there's a few ways to go about making it on one line then three lines. Without seeing the site I would say set the heading wrapping to No Wrap then normal at lower screen sizes.To see how a site looks on smaller screen sizes preview it on your browser and then grab the right hand side of the browser window and squeeze it to the left and watch the magic happen.

Thanks for your responses and assistance.

After I posted my request for help I went back to try again. I guess I must be figuring out the program a bit more every time I try it because this time I got things to work.

The only thing I am unsure about right now is how the menu I created in the menu builder, and how the content slider will look in the scaled down versions because there is no live preview of the html items. Is there a way to check/preview these items?

Also, thank you for teaching me the proper word "break points" instead of "benchmarks".