• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 92
  • Last Modified:

Lightbox Text and Lightbox right border gets truncated on responsive page , on devices other than desktop

Mobile devices and tablets  Right  border is cut  off and some text of lightbox. Ok on desktop.

If you go to
https://www.housecarers.com/test3/housesitter-profile.cfm?mem=2145637377

Then click Contact Button the lightbox left is truncated. I seem to be able to swipe left to make border and text to appear. But how to prevent this?
0
Ian White
Asked:
Ian White
  • 10
  • 8
1 Solution
 
F PCommented:
Remove this width:

@media screen and (max-width: 800px)
body.profile-details .fancy-inline-box {
  /* width: 100%; */
}

Open in new window


from main.css, and also add this to the bottom of your page:

#fancybox-wrap { left: 0; }

Open in new window


Your javascript is adding it.
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks - sorry what is javascript adding?  This was done externally.  What do I have to stop javascript adding?
0
 
Ian WhiteOwner and FounderAuthor Commented:
At bottom of page?  Just like that?  Sorry I'm a novice

#fancybox-wrap { left: 0; }
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.

 
F PCommented:
I would grep the directory of javascript that you have and parse it for

fancybox-wrap

or

left: 20px;

to find where it gets added. Also this should be commented out:

@media screen and (max-width: 800px)
body.profile-details .fancy-inline-box {
  /* width: 100%; */
}

Open in new window

0
 
F PCommented:
If you put the fancybox code at the bottom, Javascript will overwrite it. Only put the others I listed at the bottom, before the </body> tag and change the javascript for fancybox on the other.
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks I made the changes but still have the same result - see changes below

https://www.housecarers.com/test3/housesitter-profile.cfm?mem=2145637377
0
 
F PCommented:
So, the issue is with the text element width pushing the border out now. The first issue I responded with was with the element box outside the view also, and if you define a max-width of 300px with where I mentioned before, that should fix this issue. I'm mobile now but will test later and provide code if you haven't put this in as well:

max-width: 300px;
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks I put in max-width: 300px at bottom of page as well. Still problem on iphone 5s. Samsung tablet ok
0
 
F PCommented:
Take out that max-width you put in, and put this in:

#loginOrJoin-box
{
    max-width: 250px;
}

Open in new window


I checked and that will bring in what you want from where it is. The max-width of 300 I mentioned above needed to be added like I put there, so sorry if I wasn't more clear. I also found that the 250 width is what you want since it has padding and such.
0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks I put that in, but still have to swipe  left to see all text / border on lightbox on iphone 5s
0
 
F PCommented:
Testing using Chrome, and that isn't the same as using the device, and it showed as an iPhone 5 that the element width on the ID of #fancybox-content was 240px. I modified it using the developer tools to the following and it showed the edge correctly for that device, so try putting this change in at the bottom of the CSS:


#fancybox-content
{
    width: 280px;
}

Open in new window

0
 
Ian WhiteOwner and FounderAuthor Commented:
Thanks for your persistence and efforts. I put that change in and refreshed but still have to swipe left to see content and edge of iphone 5s.
0
 
F PCommented:
0
 
Ian WhiteOwner and FounderAuthor Commented:
Yes cleared Coldfusion Template Cache and cleared cache in safari on iphone, also getting same result with chrome on iphone 5s

There is some specific css included for this page only. Not sure if that has impact.

@media screen and (max-width:360px)  {                        
      
      body.profile-details .fancy-inline-box {
            padding: 33px 10px;
      }
0
 
F PCommented:
Add this to fix the text overflowing:

#loginOrJoin-box {  box-sizing: border-box; }

Open in new window


... and I'm still looking into the orange border.
0
 
F PCommented:
Try this for the orange box:

#fancybox-content { min-width: 250px; }

Open in new window

0
 
Ian WhiteOwner and FounderAuthor Commented:
Fantastic, Thanks Frank works now.  Appreciate your assistance... would never have worked that out. The world is getting more complex... maybe that is why everyone is turning to WordPress. Anyway I persist with my custom website..  that word press could never produce
0
 
F PCommented:
Happy to help!
0
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 10
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now