Responsive Footer - stacked containers on mobile

[Nate_Sheridan]

Hi,

My footer looks great on desktop but the containers do not stack in mobile view.
Not sure what I’m missing but ideally I would like my containers to appear in a row on desktop but stack on top of each other like columns when viewed on a mobile.

What’s the best way to achieve this?

Many thanks

[tristup]

Hi @Nate_Sheridan,

Thanks for reaching out.
Sometimes the only screenshots do not help us to recognize the issue you are having. We need to examine your site to get the cause of the issue.
I have checked the site listed in your Themeco Account but didn’t find the footer described in the screenshot. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Nate_Sheridan]

If you could look into this that would be great.
Is there a standard setup process for this? As I image this layout would be quote common.

Thanks in advance

[tristup]

Hi @Nate_Sheridan,

I have checked your website and found that the Bar flexbox Child Placement option is set to the Row, which is the problem in your case. I would suggest you copy the Bar and set the flexbox Child Placement option to Column and show only in the specific screen size using the Customize > Hide During the Breakpoint.

I went ahead and created a copy of the Footer and did the same as described above, you can check use that too.

Hope it helps.
Thanks

[Nate_Sheridan]

Hi,
Thanks for the fast response!
Although your solution seems like an excerptible work around, it’s actually counter productive to create 3 or 4 of the same footer and then hide/display based on screen size. Would make managing and updating a bit of a nightmare also.

Ideally what I would like to do is the same as what I have achieved here using Pro:
https://www.erpropertygroup.co.uk
Whereby the text and social icons are in separate contains but appear in the same row.
And as you reduce the browser width you can see that the elements stay within their container and on screen but also stack on top of each other to display in a column type format (social icons show below the main text) when the screen size is too small for them to sit side by side.

This example site was created using Pro 3.2.3
Pro has had a lot of updates and undergone quite a lot of changes over the last year.
For me every time I update to the latest version the site doesn’t quite display as it previously did and the process of creating the same effect as in previous versions is completely different or in this case none existent?

[tristup]

Hi @Nate_Sheridan,

You don’t need to create multiple Footer for this, you can add multiple Bar to the same footer, which can be controlled for the specific devices using the Customize > Hide During the Breakpoint options.
Even in the example site Footer, in smaller screen devices it shows a similar output.

I would suggest you follow the way I have described, to get rid of this problem.
Thanks