CODEWITHSUNDEEP
htmlcsscross-browser
TheIronCheek
TheIronCheek

Reputation: 1149

Paragraph text not wrapping in Safari/iOS

I have a site with a small pricing blurb. In every browser I've tested in (Chrome, Firefox, IE, Safari for Windows, Chrome for Mac) it looks exactly as intended:

enter image description here

Unfortunately, though, in Safari for Mac, iOS Safari, and Chrome for iOS, the "MEMBERSHIP" text doesn't wrap to the next line and is pushed to the right farther than it should be:

enter image description here

Since I am not aware of any inspector for mobile, I'm having a really hard time figuring out why this text is displaying in the wrong place.

Here's the HTML:

<div id="home-cta-text">
    <p style="font-size:40px; text-align:center; font-family:'Franchise-Bold', Arial, sans-serif; line-height:40px; color:#fff; margin-left:auto; margin-right:auto;">
        MEMBERSHIPS AS LOW AS
    </p> 
    <div id="home-cta-right" style="float:none; margin-left:auto; margin-right:auto;">
        <p><span>$19</span><sup>.99</sup></p>
        <p class="home-cta-subtext">PER MONTH</p> 
    </div>
    <div style="clear:both;"></div> 
</div>

And appropriate CSS:

#home-cta-text {
    padding: 1em;
    background-color: rgba(0, 0, 0, 0.4);
    width: 377px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

#home-cta-right {
    float: left;
    width: 156px;
}

#home-cta-left p, #home-cta-mid p, #home-cta-right p {
    font-family: 'Franchise-Bold', Arial, sans-serif;
    font-size: 109px;
    color: #fff;
    line-height: 90px;
    padding-bottom: 0;
}

#home-cta-text p.home-cta-subtext {
    font-size: 40px;
    line-height: 40px;
}

#home-cta-text sup {
    position: relative;
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    font-size: 49px;
    display: inline;
    margin: 0;
    padding: 0;
    bottom: 43px;
}

Can anyone tell me what's going on here?

EDIT: I just noticed that if I remove my @font-face font, the text wraps normally. What's going on here?

Upvotes: 2

Views: 4244

Answers (2)

Wout
Wout

Reputation: 36

I'm having the exact same problem on safari 10+ with the same font. Works perfectly on all other browsers. Looks like a problem with Franchise Bold. I'm going to try downloading it again, hoping there's something wrong in the font files.

EDIT: Apparently I got the wrong files in my assets. Downloaded the font again from Weathersbee Type (http://www.weathersbeetype.com/fonts/franchise/) and it now works in Safari 10+ (and all other browsers).

Upvotes: 1

Егор Кротенко
Егор Кротенко

Reputation: 818

try use not 'P' just use DIV, and use just text-align center

Upvotes: 0

Related Questions