[toddw]

I love the flexibility of Interface. It is clean and responds really well… with the exception of the Featured Image Titles.

I have a pretty large logo, so I don’t know if it is the culprit or not, but Featured Image titles and Short Descriptions disappear when I view my website on my iPhone 6S Plus.

http://clpkids.org

Can you share some CSS which will re-enable the text over Featured Images?

Thanks and regards,
Todd

[Theme Horse Support Team]

Hi Toddw,

We have hide the Featured Image titles and Short Descriptions in small devices as this will overlap the whole slider image.
We can share some CSS code but it will overlap your slider image which will not be a user friendly.

Thank you!

[toddw]

Thank you for the feedback Theme Horse.

I have a link to an image of the homepage of my site here: https://67.media.tumblr.com/96bd2b1646ad61f65757fd83a1581871/tumblr_of7d591Ulr1skjgvjo1_1280.png

While I am not using Revolution Slider, I tried both Featured Post/Page Slider Options and Featured Image Slider Options and neither one of these will display text over the homepage slider images at the mobile screen sizes, nor at the 2000 x 1116 resolution of my iPhone.

I’m in need of text in the form of a Title and Short Description on the mobile and tablet views. I don’t know PHP or media queries well enough to enable this on my own, so I am hopeful that you have developed a solution that is responsive and not adaptive (as is currently the case).

Thanks and regards,
Todd

[Theme Horse Support Team]

Hi Toddw,

Responsiveness works with media screen size not with resolution. Even you mobile resolution is higher but the screen size will be small and according to the design of this theme you can not see the featured slider image clearly if we display title and content.

Anyways, we have provided you a custom CSS to display the title and content of the featured slider So, please go to Appearance -> Customize/Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save button:

@media only screen and (max-width: 767px) {
    .featured-text .featured-title, .featured-text .featured-content {
        display: block;
        padding: 3px 10px;
        font-size: 12px;
        line-height: 16px;
    }
}

Thank you!

[toddw]

Hi Theme Horse,
Thank you so much for the help! I have applied the custom CSS to the “Custom CSS” panel, and also tried adding it to the style.css of my Interface Pro Child theme, but am unable to view the title text on a mobile device or mobile resolution. The title text disappears whenever the mobile menu (“hamburger” icon) replaces the desktop menu.

I can share my WordPress login and password if that would help. I have an iPhone to check on my website, along with “Enter Responsive Design Mode” under the “Develop” menu item in Safari on my MacBook Pro.

Thanks and regards,
Todd

[Theme Horse Support Team]

Hi Toddw,

Can you please add those custom CSS and let us know? So, that we can see your live site why it’s not working?

Thank you!

[toddw]

Hi Theme Horse,
I applied the above custom CSS to the site at clpkids.org

Thanks for all your help!

Todd

[Theme Horse Support Team]

Hi Toddw,

Sorry! We have provide you a mistake code.
We have corrected the above custom css code could you please try above code once.

Thank you!

[toddw]

Thank you Theme Horse!

I apologize for not being more knowledgeable about the syntax of media queries, as I could have caught the issue, as well.

…however, your CSS works perfectly for me.

Beautiful, thanks!

Todd

[Theme Horse Support Team]

Great!

Could you also please help us rating this theme in WordPress Repository.
https://wordpress.org/support/view/theme-reviews/interface
We really appreciate your rating.

Thank you!

[Author]

Posts