Please Help with Responsive CSS issue

[gerdydog]

I have been making up this responsive design. When you scale the browser window down to the size of mobile or tablet one of the divs is slightly out of line. Can anyone please help me to fix this.

You can visit the issue here: http://reachmediani.co.uk/problem/

Thanks so much for your time.

[NghiQuach]

you can add a media query at the width of tablet size to make right col: float left and get rid of the left margin
I think that will fix it

[JohnMac4]

You have padding-left set. It doesn’t need to be there for the smaller sizes. That’s causing the issue.

#right-col {
float: right;
padding-left: 20px;
border: 1px solid #000;
margin-left: 50px;
width: 286px;
background: -webkit-radial-gradient(bottom, circle, #fff, #52bdec);
background: -moz-radial-gradient(bottom, circle, #fff, #52bdec);
background: -ms-radial-gradient(bottom, circle, #fff, #52bdec);
}

[gerdydog]

Thanks John, That has lined up the left side perfect. But the right side is still off.

Any idea?

Thanks in advance for your time. And thanks NghiQuach also.

[Author]

Posts