Responsive Header - 2-Columns With Correct Break Points

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

  • 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
  • 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
  • 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
  • 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
  • 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
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.