I'm rebuilding the Canvas Responsive theme in RLM and have a width issue with my 'template' page at phone size.

Here's a link to my test site: http://www.mytestblog.net/test/

The page loads fine and displays fine until I realized there was extra space at the right side of the page. If you scroll to the right it shows a larger margin.

I've removed all the extra padding in RLM and I must be missing a setting somewhere. I'm attaching the RLM file so if anyone has the time to take a look and let me know if I've missed a setting or did something that is causing this that would be great.

This is only the second site I've tried with RLM so I know I'm not up to speed with RLM.

Thanks for any help,

Ernie

You should not have to scroll left or right with a responsive site. I don't get any scroll bars with the page.

Hi Ernie,

I have noticed this on a few of my websites that I build too. Originally I thought it was my wow slider but with some more testing and I can replicate this with nothing added to the layout. You should attach this rlm file and let the CC guru's have a peek at what may be causing this.

What exactly are your guys seeing? I don't have any scrolling in his page or .rlmp file.

Ernie, I see the horizontal scrollbar appearing at about 400px width. But your lowest @media rule is at 500px, which is within the 'tablet' area in RLM. I'm no expert here, but me thinks you need to add rules for smaller screens too, and especially reduce the min-widths for some of the elements.

The logo at 276px min-width with a 10% left margin will be too wide for most phone/portrait views.
At that size, I'd drop any left/right margins, and if the logo is the only thing on top, go ahead and center it. If having it at 100% width, auto height lets it get too small at phone size, try out a smaller min-width – maybe around 230 to 260 (no margins, or margin-auto).
Also, think about the actual logo; whether it's just an image or also has text. For example, on wide screens, a logo with an image to the left and text to the right would work, but on a tiny screen it would be better to separate it and have the text below the image.

Sorry about that I assumed he had scrolling at full size and didn't quite go far enough on the squeeze to see the scroll appear.
Also Ernie if you need an element moved over more then use the push pull instead of that 10% margin. That may eliminate break points.

Just out of curiosity, Paintbrush and Eric; your solutions look different from mine (Paintbrush's not too much, though). I know that my solution would work, and yours most likely too. But is mine more a 'coder's solution rather than a rlm one? Being a coder, I still haven't got myself too familiarized with RLM, so hence my question.

The scroll bar is there cause he has row 2 set to 385px min.

I think his issue is the large margin on the right after you scroll over. But I could be wrong

EDIT* And Ernie I agree with Eric. You shouldn’t really have scroll bars on responsive. I’d get rid of all the min px settings. As your screen resolution gets smaller you move things around to allow for full width content.

Inger, it's a matter of taking what you already know, then finding the comparable method in RLM. I haven't had much time to really dig into RLM (and I'm sort of holding out for Foundation), but it seems to use standard grid conventions.
So, for just a logo in the header, I usually don't contain it within a span... I just position it (left, right) and give it a max-width so it can't get stretched out of proportion.
For more info I would use spans. Something like span_3 for logo, span_ 9 for headline. And I would guess sub-grids could then be used within that for some links, phone number, whatever.
Does RLM include a CSS re-set to make sure you don't end up with unexpected padding and margins?