Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #24876

    Why would my content be overlapping in mobile view: http://cl.ly/image/3O0A100n2B25

    hmtl

    <p style=”text-align: center;”><span style=”color: #333; font-family: ‘League Gothic’, auto; font-size: 50px;”>Example Content</span></p>

    <p style=”text-align: center;”><span style=”color: #333; font-family: ‘League Gothic’, auto; font-size: 30px;”>Example Content More Content</span></p>

    All is fine on computer, tablet.?

    #125057

    Hi,

    It is because you have an inline font-size of 50px and 30px. It is way too big for mobile devices. Give the <span> tag a unique css selector. Something like this:

    <p style="text-align: center;"><span class="paragraph-1A">Example Content</span></p>
    <p style="text-align: center;"><span class="paragraph-1B">Example Content More Content</span></p>

    Then style it on your custom.css or Quick CSS

    .paragraph-1A {
    color: #333; font-family: 'League Gothic', auto; font-size: 50px;
    }

    .paragraph-1B {
    color: #333; font-family: 'League Gothic', auto; font-size: 30px;
    }

    Then add Media Queries to target the span on mobile devices.

    /*
    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

    @media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    .paragraph-1A {
    color: #333; font-family: 'League Gothic', auto; font-size: 20px;
    }

    .paragraph-1B {
    color: #333; font-family: 'League Gothic', auto; font-size: 10px;
    }
    }

    Regards,

    Ismael

    #125058

    This is perfect thanks so much for the awesome support!

    Maybe this is my issue with the layer slider.

    #125059

    Better yet…I kept the same font size and just added: line-height:90% to the media queries and it added the correct spacing…but using the class is best. Thanks

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Content Overlapping’ is closed to new replies.