I am working on my homepage with Rows and 4 identical columns of 3 spans in each Row. Each Column has the following Elements, a Container and in the Container is a Picture Link and a Text Link. Each Row is defined separately to stack within that row. I have a Hover programmed to change the background color of the Column and make the text in the caption go to bold to designate the column to be selected and linked. So, when I am set at 4 columns at 3 spans the Hover works perfectly. The Row is not affected or changed in any way.

I then have a breakpoint at 1050 pixels and there I change my Columns to 4 spans. So now there is a line of 3 Columns containing my picture and text caption and the 4th picture and text caption stacks below the 1st Column all the way to the left margin, and it stays within that defined row. Then a weird thing happens. The Hover works fine over Column 1 and Column 2, but when I Hover on Column 3 (top right picture), it makes the column that was stacked under Column 1, jump to the right side margin. It's as if the Hover was adding width somewhere and forcing the stacked Column/Container/Picture to the right margin?? I can't figure out why?

I then have another breakpoint at 800 pixels and I change my Row to have 2 Columns each 6 spans in the top line and then a second line of 2 columns of 6 spans, still staying in a defined row. The same weird thing happens, when I Hover over the top right hand corner picture the second line gets forced to create a third line. Again, as if the Hover in the top right hand corner of the row is adding width somehow.

Can you help?? Thanks,
Gordon

It is always easier to help if we can SEE the problem. Could you please zip up your .rsd file and post it here?

Hi,

I sent my .rsd file with my first post and I re-sent it yesterday. Did you get? Do you need me to send it again?

Thanks,
Gordon

Nothing was received, Gordon. If the file is over 1mb, you wi ll need to upload it to your server first and post the link to download it.