[sschmeer]

Hello,

I’m using the Helena free theme for my website. The header options include a title, content, and a button. I’m choosing to not use a title. Everything looks great on a computer (www.uneventravel.com) but the tablet and phone versions of the header don’t show the content and button text, just a grey area where the button text should be. Image responsiveness is fine. Can you please help me get the header content and button text to be responsive?

Thank you,
Sarah

Edit: I tried adding the CSS you recommended in a similar post on Jan 31st but it didn’t change anything.

[Pratik]

Hi @sschmeer,

First, please remove code:

@media screen and (max-width: 420px) {
    #header-featured-image .entry-title {
        font-size: 20px;
    }
}	

from your Appearance=> Customize=> Additional CSS box.

Then add following code in same place:

#header-featured-image .entry-content {
    display:block;
}

@media screen and (max-width: 910px) {
    #header-featured-image h1 { font-size: 20px; }
}

Regards,
Pratik

[sschmeer]

Hi Pratik,

Thanks for your quick response! It looks better on the tablet, but now the content and button overlap with the site ID and menu on mobile.

Sarah

[Pratik]

Hi @sschmeer,

No matter how small I make the font, it overlaps with header. So I can provide you with solution to hide the text and button on smaller devices. Let me know if you want that or not.

Regards,
Pratik

[sschmeer]

Yes, hiding the text and button on smaller screens would be perfect. Thank you.

Sarah

[Pratik]

Hi @sschmeer,

Add following code:

@media screen and (max-width: 550px) {
    #header-featured-image .entry-container { display:none; }
}

[sschmeer]

Perfect, thank you!

[Pratik]

Hi @sschmeer,

Glad it worked out. If you liked our theme and support, please help us by leaving a review at https://wordpress.org/support/theme/helena/reviews/.

Regards,
Pratik

[Author]

Posts