Support Center Visit Demo License manager Buy @ envato

Responsive Header - 2-Columns With Correct Break Points

fabianwielandfabianwieland
in Theme support
Hi there,

for my website (www.fabianwieland.de) I am using a simple section with a large background image. In there, I have put 2 columns - a left one with a placeholder and a right one with a text (H1, etc.). It looks nice on my screen. But with smaller screens (e.g. tablet), the text from the right column goes over the image which doesn't look nice. (I have disabled the background image for mobile, so mobile works okay for me).

How can I improve this so that the header looks good on all devices?

Thanks and regards,
Fabian

Comments

  • PabloPablo
    Hello,
    Sorry, I do not quite understand.
    How do you would like to look it nice? I do not see the problem at all.
    If it's possible, please attach some screenshots.

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • fabianwielandfabianwieland
    Hi,

    alright, I'll use some screenshots. With smaller devices/screens, the text overlies my face on the image:


    This is even worse when the device / screen is smaller:

    What would you recommend how I can avoid any text overlays?

    Thanks
  • PabloPablo
    It's because of your padding which you applied in the row.

    You should apply the Revolution Slider or change the padding values as a height.
    Also, you can create a separate header (first section) for desktop and mobile using the Responsive Visibility which can be noticed at the bottom of the settings while editing the section in the Muffin Builder.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • fabianwielandfabianwieland
    Hi there,

    I applied your last option with separate header sections for desktop and mobile. However, this seems to be a bad option from a SEO perspective, because there are 2 x H1 on one site. Of course, the user doesn't see that, but Google does, right? Shouldn't your "Responsive Visibility" function be able to configure this correctly from a SEO perspective?

    Regards,

    Fabian
  • BryanBryan
    Hello,
    you are correct but there is not much that can be done.
    You can always use h2 for another screen size and style it locally to look like an h1.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.