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

This page is fine on all devices except high res display desktop.

The left column form fields overruns into the right column (shaded). See screen shot and url

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

Not sure what to do to fix this. Happens on other pages too.

Below is example problem  page with CSS
https://www.housecarers.com/test3/member_login4.cfm

Open in new window


Thanks for your suggestions.
Screenshot-2015-09-18-11.49.16.png
Ian WhiteOwner and FounderAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterCommented:
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)
0
Ian WhiteOwner and FounderAuthor Commented:
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
0
Russ SuterCommented:
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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Ian WhiteOwner and FounderAuthor Commented:
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.
0
Russ SuterCommented:
OK, if I stretch my browser window across both screens I do see what you're talking about. Your screen has an insanely high resolution.

The problem stems from the fact that your background is an image which is static and your div elements flow (as they should). You can fix this by creating your background out of a pair of divs. The relevant section would be inside the <div id="middle"> element, just add the following 2 items:
  <div style="position: absolute; width: 50%; height: 100%; background-color: white;"></div>
  <div style="position: absolute; width: 50%; height: 100%; background-color: #F9F9F9; right: 0; border-left: 1px solid #E5E5E5;"></div>

Open in new window

Of course you should use css rather than inline styles but this will fix your issue. Also, once you've added those 2 elements you can ditch the background image property of <div id="wrap">

EDIT: now that I look at it more closely, you probably only need the 2nd of the 2 divs but I'd still add both of them because I like symmetry.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ian WhiteOwner and FounderAuthor Commented:
Also appears to only manifest in Chrome not Firefox or IE
0
Ian WhiteOwner and FounderAuthor Commented:
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
0
Ian WhiteOwner and FounderAuthor Commented:
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
0
Russ SuterCommented:
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.
0
Ian WhiteOwner and FounderAuthor Commented:
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
0
Russ SuterCommented:
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.
0
Ian WhiteOwner and FounderAuthor Commented:
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
0
Ian WhiteOwner and FounderAuthor Commented:
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
0
Russ SuterCommented:
So what's next? Do you still need help?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.