I'm working on a website that is set up to be a responsive design that gracefully transforms according to the size of the screen it's viewed on.
With iOS, I'm noticing that whenever I display the business phone number in an excerpt that displays underneath a slideshow element, the anchor tag that iOS automatically inserted causes a line break just before showing the phone number. See this screenshot for detail.
Sorry, but I have NO rendered source code to show this as iOS doesn't expose that via any kind of "view source" feature. If there is a way to show my source as rendered on iOS, please let me know.
I do have the pre-rendered CSS that, based on screen size, triggers the right line spacing between the break and the text above it, but it has been difficult to find a balance between line spacing and positioning. Here is that code:
First, for "normal" screens:
.content .genesis_responsive_slider .slide-excerpt {
background-color: #222;
filter: alpha(opacity=0);
height: 8%;
width: 100%;
margin: 0;
padding: 0px 0px 0px 4%;
}
Next for "mobile" screens lte 480px wide:
@media only screen and (max-width: 480px) {
.content #genesis-responsive-slider .slide-excerpt {
font-size:inherit;
height: 24%;
padding:4% 0 0 0;
line-height: .5rem;
}
}
Is there a way to prevent that anchor text line break on small iOS screens?