[Resolved] footer widget center on mobile

[Howard]

Hi Leo:
Small problem. Desktop media footer(widget)is centered for 3 widgets. However, with mobile, the 2 I currently have utilized puts them one above the other but on the Left Side of phone screen. i have this CSS installed

.inside-footer-widgets {
text-align: center;
}
______________________________________

I read another thread with similar problem.The person had this:

@media (max-width: 768px) {
.footer-widgets, .lsi-social-icons {
text-align: center !important;
}
}
What do you think?
Thanks Howard

[Leo]

Hi there,

I believe this is what you are after:

@media (max-width: 768px) {
    .footer-widgets {
        padding: 10px;
    }
}

[Howard]

Hi Leo:
The CSS didn’t seem to do anything. I do also have this in CSS if that makes any difference: (should they both be there?)

.inside-footer-widgets {
text-align: center;
}

[Leo]

I’m not seeing the CSS being added.

Have you cleared the caching plugin?

[Howard]

Yes… cleared cache twice

My older site has this instead.. maybe new premium version it’s outdated

inside-footer-widgets { text-align: center;.
Don not display site header code
.site-header {
display: none;
}

I did notice my Tom Social Icons in old site footer widget were a tiny bit Smaller????
And second middle widget has smaller text under the footer widget logo
https:www.rawassertions.com -old site
https://www.thesoundadvocate.com new site**

[Leo]

That CSS isn’t correct as I suggested here:
https://generatepress.com/forums/topic/mobile-menu-display-bottom-with-larger-nav-size/page/3/#post-653853

I’ve provided the correct version here:
https://generatepress.com/forums/topic/mobile-menu-display-bottom-with-larger-nav-size/page/3/#post-654597

Back to the original problem. I’m still not seeing the CSS being added so there is likely a syntax error that stops the CSS from being read. Can you run all the CSS through this site and make sure there aren’t any errors?
https://jigsaw.w3.org/css-validator/

[Howard]

First to correct version CSS:
All is the same except these bits of wording:

(dont see any problem on site)

.secondary-navigation .sf-menu>li {
float: none;
display: inline-block !important;
}
}
original problem:
As I am far from knowledgeable on this I can only give you errors found on both of current pages the site has
I dont know if you ran this already….but my home page and contact page has these errors

HOME
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.thesoundadvocate.com%2F

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.thesoundadvocate.com%2Fcontact%2F
CONTACT

As for CSS being added…do not know where I would start to validate a syntax error if such exists
howard

[Leo]

The code you provided above has 1 opening bracket { and 2 closing brackets }.

Go to this site and copy and paste all of the CSS you’ve added and see if you get any errors:
https://jigsaw.w3.org/css-validator/#validate_by_input

If you can’t do that, then disable the caching plugin.

[Howard]

To be sure…just ‘view page source’ then copy all the code into that box you linked to?
no…i must go to my site host
will try

[Howard]

This document validates as CSS level 3 + SVG !

To show your readers that you’ve taken the care to create an interoperable Web page, you may display this icon on any page that validates. Here is the XHTML you could use to add this icon to your Web page:

Valid CSS!
<p>

<img style=”border:0;width:88px;height:31px”
src=”http://jigsaw.w3.org/css-validator/images/vcss&#8221;
alt=”Valid CSS!” />

</p>

Valid CSS!
<p>

<img style=”border:0;width:88px;height:31px”
src=”http://jigsaw.w3.org/css-validator/images/vcss-blue&#8221;
alt=”Valid CSS!” />

</p>

FOOTER

Sorry! We found the following errors (9)
URI : TextArea
10 Parse Error <?php /** * The template for displaying the footer. * * @package GeneratePress */ if ( ! defined( ‘ABSPATH’ ) ) { exit; // Exit if accessed directly. }
22 Parse Error ?> <!– #content –> <!– #page –> <?php /** * generate_before_footer hook. * * @since 0.1 */ do_action( ‘generate_before_footer’ );
25 Parse Error ?> <div <?php generate_footer_class();
32 Parse Error ?>> <?php /** * generate_before_footer_content hook. * * @since 0.1 */ do_action( ‘generate_before_footer_content’ );
42 Parse Error /** * generate_footer hook. * * @since 1.3.42 * * @hooked generate_construct_footer_widgets – 5 * @hooked generate_construct_footer – 10 */ do_action( ‘generate_footer’ );
49 Parse Error /** * generate_after_footer_content hook. * * @since 0.1 */ do_action( ‘generate_after_footer_content’ );
59 Parse Error ?> <!– .site-footer –> <?php /** * generate_after_footer hook. * * @since 2.1 */ do_action( ‘generate_after_footer’ );
61 Parse Error wp_footer();
65 Parse Error ?> </body> </html>

Best I can do with this Leo
Please inform

[Leo]

Let’s try a different approach.

First, disable the caching plugin.

Then modify all the footer widget padding here to 10px:
https://docs.generatepress.com/article/footer-padding/#footer-widget-area

[Howard]

Will do… get back soon!
Thanks

[Howard]

You fixed it!!!👍👍
Please advise any cautionary actions if I modify widget padding and footer
Thanks 👌

[Leo]

Not really in this specific case 🙂

Just make sure the left right are the same so they will be centered.

Glad I could help!

[Author]

Posts