Footer Responsive Problem

Hey there @kulius – it looks like your custom CSS is causing text in the footer to overlap on top of each other on mobile, so I would start by removing that altogether. 🙂

With your custom CSS:

With your custom CSS removed in my browser inspector:

This second piece of CSS is causing other problems, making text way too small throughout your site, on small devices, including the headings in the screenshot above (Email, Telefon, etc.)

h5 {
  font-size: clamp(0.25rem, 0.125rem + 2vw, 1.25rem);
}

Try resetting this to the theme’s defaults, wherever you modified it – perhaps somewhere in your page builder’s settings? This should fix the original size issue with your headings in the footer widget area.

Finally, this wasn’t part of your original question, but just a heads-up that body text shouldn’t be assigned as a heading. This will cause issues for anyone using a screen reader, and is also not good for SEO. (It also, in its current state, makes the text unreadable – way too tiny – on mobile.) Here’s an example of what should be Paragraph blocks, and not h5 Heading blocks:

Let me know how it goes!

@kulius Here are a few general tips for writing custom CSS for a “classic theme” like this one. (A classic theme is one that does not use the Site Editor.)

• To set a different size on smaller devices you can use a media query with your CSS. Media queries allow you to target different screen widths.
• Get more specific (in CSS terms) with your selectors, so you’re not targeting all h2 headings, for example, but only the h2 headings in a specific part of your site, such as the footer.

So something like this:

/* Footer widget h2 headings */
.footer-widgets h2.wp-block-heading {
     font-size: 24px;
}
/* Footer widget h2 headings - smaller screens */
@media screen and ( max-width: 782px ) {
     .footer-widgets h2.wp-block-heading {
          font-size: 18px;
     }
}

This would keep things pretty simple, but still allow you to target things well.

It would be great if I could get it in one row but the customizer won’t let me use the full page.

Your footer widget area is currently set up to use only half (50%) of the footer area:

It looks like you’re only using the “Footer #2” widget area, so that’s why it’s only taking up half the page width. Try putting some of your widgets in “Footer #1” to better balance the bottom of the page.

I could although give you a user login to have a easier look on the website, if you want to.

Thanks for the offer, but forum volunteers are not allowed to request back-end site access.

The Problem on the footer would be that although the Menus are h2 and I would like to change that to a smaller h.

Although I would like to get the footer more compact. I thing there is a lot of margin in it. Would you have a better idea the me setting every margin to 0 via css.

Before changing margins, could you please clarify what you mean by “a smaller h”?

You’re very welcome.

Somewhere in your site you’ve either added the following CSS, or perhaps your WP Bakery page builder plugin generated the CSS based on your settings in the plugin:

h1, .heading-size-1, h2, .heading-size-2, h3, .heading-size-3 {
  margin: 6rem auto 3rem;
}

Since the heading-size-3 class is being applied to your footer widget headings, you’re seeing 3rem of space below each one.

I’d suggest you find the spot in your settings or page builder where you added that, and adjust it there.

Great! Your footer is looking good to me.

Thanks for all your help and quick response.

You’re very welcome.

I’m marking this as resolved since all the outstanding issues with your footer have been sorted. For any new questions, please start a new topic. Cheers!