Spirited Pro theme not displaying correctly on smartphone portrait.

Home Forums All Other Themes Spirited Pro theme not displaying correctly on smartphone portrait.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #140623
    Diane Blakley
    Participant
    • Topics: 34
    • Replies: 36
    • Total: 70
    Member since: December 15, 2016

    Hi,
    I’m using Spirited Pro on rodsnrelics.net Everything displays fine until you get to the smartphone portrait version.
    • The homepage and inner content pages have a lot of overlapping.
    • The top bar with the email address becomes very wide vertically.
    • On the homepage – the title and description of the photo sliders ‘fall off’ the photo.
    • The logo on the inner pages doesn’t scale appropriately.

    Here is how it looks: https://imgur.com/WRXvp4A

    Thank you for your help. I checked out the forum and the solutions I found didn’t work with this newer version.
    Diane

    #140633
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22711
    • Total: 22711
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    @media screen and (max-width:479px) {
    .head-info-area { height:auto !important;}
    .logo { width:25% !important; max-width:inherit !important;}
    .logo img { height:auto; width:auto;}
    #slidera { margin-top:-12% !important;}
    .header-bg-img h4 { top:50%;}
    .slider-main .nivo-caption { top:15% !important;}
    }

    Regards,
    Dave

    #140689
    Diane Blakley
    Participant
    • Topics: 34
    • Replies: 36
    • Total: 70
    Member since: December 15, 2016

    Thank you so much Dave…that worked. But now it’s displaying incorrectly in the landscape mode.

    Here’s how it looks: https://imgur.com/t1dP7ag

    Thanks, as always, for your support and quick response.

    Best always,
    Diane

    #140701
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 22711
    • Total: 22711
    Member since: August 16, 2013

    Hi Diane,

    Kindly use this one

    @media screen and (min-width:480px) and (max-width:767px) {
    .head-info-area { height:auto !important;}
    .logo { width:25% !important; max-width:inherit !important;}
    .logo img { height:auto; width:auto;}
    #slidera { margin-top:-12% !important;}
    .header-bg-img h4 { top:50%;}
    .slider-main .nivo-caption { top:15% !important;}
    }

    Regards,
    Dave

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.