I use this code for legends as headings with explanatory text inside the boundaries. It works fine on my computer and all browsers but with my cell phone, Android Chrome to be specific, the text spills over the right border like.
Do you have a screen shot of that? I’m not seeing anything obvious that would cause it.
Also I took the liberty of refactoring your CSS:-
.important {
border: #0b2bcc 1px solid; /* The border is the same all round, no need to define every side */
padding: 8px 10px 7px 20px; /* Shorthand for padding different on all sides */
border-radius: 6px; /* Don't use redundant browser prefixes. When you do need prefixes, put the rule without any last */
}
* > .important {
background: #fff;
border-radius: 4px;
}
.important legend {
border: #0b2bcc 1px solid;
padding: 1px 15px; /* Two value shorthand for top & bottom the same, and left & right the same */
font: 1.2em "Trebuchet MS";
background: #c8cff1;
color: #0b2bcc;
border-radius: 4px;
}
It wasn’t inteded to make any difference in the functionality of the code. It was to improve readablity and brevity.
Though actaully, removing the prefixes made the round corners work.
But back to the problem. It looks like there is more at play here than you are showing us.
Can you offer the actual content that is within the box, plus any additional CSS that may be affecting it?
It looks like you are outputting strings of code which may contain long unbroken strings without spaces.
By default those won’t break, so will overflow a container that is too small.
You may need to look at word-break.
It’s a question of screen space. If you have an unbroken string of 100 characters and say each character takes a width on average of 8 pixels, the line will be 800 pixels wide.
That’s no problem on an HD 1920 x 1080 monitor.
But in a mobile of just 320 pixels wide, it just won’t fit.
That might be the case here. I was doing some testing with just plain text on the mobile and there was no issue. What I think might be the issues because of what @SamA74 said, could be this:
Sorry, yes fault in rushing through the emails between appointments - didn’t even see that. Looks like that will work and I will have at it. Thanks for pointing out my oversight.
