Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #109523
    sschmeer
    Participant

    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.

    #109531
    Pratik
    Participant

    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

    #109588
    sschmeer
    Participant

    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

    #109676
    Pratik
    Participant

    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

    #109743
    sschmeer
    Participant

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

    Sarah

    #109774
    Pratik
    Participant

    Hi @sschmeer,

    Add following code:

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

    Perfect, thank you!

    #110048
    Pratik
    Participant

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Helena header content and button not responsive’ is closed to new replies.