[heinelg]

Site: https://hbccc.org/wp/

I am using all three widget footer areas but they are not responsive to smaller screen sizes.

What can i do to correct this?

Thanks!

[tikaram]

@heinelg : I checked your site and it looks like there is some issue with the HTML elements on your site.
The footer div is supposed to be inside the page div based on the structure of our theme.

<footer id="colophon" class="site-footer" role="contentinfo">

On your site the footer div is not inside the page div and the structure is not well formatted. Please check on your site and remove the extra div and make sure the footer div resides inside the page div.

The issue was explained in the previous reply as well on this link
https://catchthemes.com/support-forum/topic/footer-is-align-left-on-only-one-page/#post-311657

Regards,
Tikaram

[heinelg]

Thanks, @tikaram but I do not see the extra </div> you show in the screen capture, possibly as I have continued to add to that page. When I view the source, there are 79 occurrences of <div and 79 occurrences of </div so they are balanced. Also, the

<footer <span class=”html-attribute-name”>id</span>=”<span class=”html-attribute-value”>colophon</span>” <span class=”html-attribute-name”>class</span>=”<span class=”html-attribute-value”>site-footer</span>” <span class=”html-attribute-name”>role</span>=”<span class=”html-attribute-value”>contentinfo</span>”>

is inside the page div as is should be. However, the footer, which consists of the widgets in Footer Areas 1, 2, & 3, is still not responsive although the rest of the page is properly responsive. I have uploaded my screen capture to hbccc.org/wp/wp-content/uploads/2022/10/Screen-Shot-2022-10-18-at-8.06.24-AM.png which demonstrates there is no extra div in the area you indicated.

[tikaram]

@heinelg : The issue is caused by the following css that you have added in the child theme style.css

.site-footer {
  width: 1200px;
  margin: 0 auto;
}

You can replace the css with the following one using media query and it will not affect small screen sizes.

@media only screen and (min-width: 1200px) {
 .site-footer {
   width: 1200px;
   margin: 0 auto;
 }
}

 

Let me know if this helps you out

Regards,
Tikaram

[Author]

Posts