Align footer content to center on mobile only

Hi, I am using HTML block for footer and I want to align its content to center but for mobile only. How I can achieve this?

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.footer-container .wd-sub-menu li a {
    text-align: center;
    display: block;
}

Best Regards

Thanks a lot, that worked. Can you also please tell me how I can align to center particular button element on mobile if whole column is aligned to left by default?

Hello,

You are Most Welcome.

You can assign a separate class to the button by editing the element.

Screenshot for Clarification: https://ibb.co/1Xh4ccw

Then by targeting the class you can align the button as you require.

Best Regards

I tried applying different CSS (e.g. text-align) properties this way, but I can’t influence button alignment.
Can you please suggest to me the proper CSS?

Hello,

Please assign a class to the button and provide the URL to check it myself and help you out accordingly.

Best Regards

OK. The button in question is on the home page right before the footer with “learn more” text.

Hello,

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.mcbr-centered {
    margin-left: 99px;
    margin-right: 99px;
}

Best Regards

Thanks, it works but there are two problems:

1) button becomes too narrow
2) footer is affected, right padding for footer background image is upper than it should be

Hello,

Please try adjusting the margin values as you need. Then check back.

Best Regards

It looks like margin-right does nothing, only margin-left affects placement.
And such way to center element seems non-reliable because smartphone screens have different resolutions and element position will vary depending on the resolution.

Hello,

Sorry but this is how it could be aligned to the centre using CSS.

You can try creating a separate column for mobile and set the button to display centre and hide the column for Desktop.

Screenshot for Clarification: https://ibb.co/QbwHhhX

Best Regards

I was able to achieve proper result applying “text-align:center” to the whole column in mobile css, for some reason this affects only button, previous rows are still aligned to left just as I need.

Hello,

Can you please share the screenshot of the issue, where the CSS is not apply on mobile in the homepage?

Best Regards.

I am happy with the result. I just don’t understand why when I apply text-align:center directly to button nothing changes and when I apply text-align:center to the whole column button is centered as expected, but other elements are aligned to left.
You can check this on my home page.
Once again this layout is what I want, I just don’t understand why CSS works this way here.

Hello,

I think you are not using the correct Classes for the button and applying the CSS to the wrong button class. At this time you have applied the custom CSS to the correct class that is why it is working fine.

Best Regards.

[Author]

Posts