Spirited Pro theme not displaying correctly on smartphone portrait.

[dd]

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

[Sonnal S Sinha]

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

[dd]

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

[Sonnal S Sinha]

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

[Author]

Posts