Responsive page problems / bootstrap on high res display 1920 X 1080

I have a 1920 x 1080 screen and I just looked at the page in both Chrome and IE and it looks just fine to me. Perhaps you need to refresh your cache? (ctrl + F5)

Thanks Russ - But
You see I have a Samsung High Res display in "eye-saver" mode.  In eye-saver mode it is not all bright white and the left col is more grey shaded This makes the right DIV more shaded - that is why you dont see it. But as you can see in the screen shot - it is overlapping the shaded div (shaded perhaps due to my monitor seetings) .. but sill overlapping after F5.  So it is a problem of the fields going into the right column on high res - you dont see it as you are not in eye-saver mode

That doesn't make sense. There's no css media query that understands "eye-saver" mode. I've attached a screenshot of what I'm seeing at the same resolution you mentioned.

Also, make sure you pressed ctrl + F5 and not just F5.
9-17-2015-8-22-30-PM.png

Thanks I have a high res curved Samsung display.  When I look at your screenshot it does not take up all my screen - there is vacant space to the right

Yes ctrl + F5  And it strill shows in my screenshot showing left col overflow to right col.

Also appears to only manifest in Chrome not Firefox or IE

Will take a look at your solution. I am glad there are experts out there... as way over my depth.  Yes I think screens are getting insanely high res

Thanks for your input and suggestion. This was put together by a design company that is out of the picture. Then someone else applied bootstrap to make it responsive.  So does this solution override the background image (not sure how to find that) with the white color - so everything is white ? Not sure if that is just a quick fix.

This is for my two col pages.  I have another 2 col page where the effect is worse

https://www.housecarers.com/test3/about-us.cfm

So I don't really want to insert these inline styles

So How would I do this in my main.css using the Id and class of the pages? Thanks

The background is found in the main.css

body.left-main #wrap {
  background: #ffffff url('../img/left-main-bg-repeater.png') repeat-y center top;
}

However, when I applied the very same style to the page using StyleBot it looked just fine. This indicates that there may be some other style element later on that's causing the problem. Try reapplying the above style later in the css and see if that works.

Thanks Russ.  I put that CSS at the bottom of both pages before close < /body>  and I still have the same problem.


https://www.housecarers.com/test3/about-us.cfm

https://www.housecarers.com/test3/member_login4.cfm

The first page the problem  is more pronounced on all browsers

Yeah, I'd just ditch the background and go with the <div> approach I tried earlier. It seemed to work quite well when I used the developer tools.

You can easily replace the inline styles with css classes.

Thanks that worked great for the login4  but not the first page which is also 2 col

https://www.housecarers.com/test3/about-us.cfm

https://www.housecarers.com/test3/member_login4.cfm

Unfortunately that Suggested Solution  for the login page - throws the formatting of the page out for mobiles and small tablets so I had to back it out

https://www.housecarers.com/test3/member_login4.cfm

So what's next? Do you still need help?