Widget Footer Area is Not Responsive

This topic has 3 replies, 2 voices, and was last updated 2 years ago by tikaram.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
October 13, 2022 at 7:54 am #311800

heinelg
Participant

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!

October 14, 2022 at 12:37 am #311811
tikaram
Participant
@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
October 18, 2022 at 8:41 am #311888

heinelg
Participant

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.

October 31, 2022 at 2:20 am #312138
tikaram
Participant
@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