Footer Widgets Not Responsive & Layout

1. There is only 1 footer widget option even if you have 4 or 5 columns - how do you control what goes in each column? I want to put more than one thing in each column but cant do this with a single footer widget - e.g. text plus social icons. I also have no idea how it will look on the page and where the content goes this way without using customizer

2. How hard is it to add more footer widgets to your theme to control this layout - Usually you see one widget per footer column so you can see whats going into each one

3. The footer is not responsive in portrait mode - see your demos on a tablet - Star or Gruby will show this issue. I need the footer to be responsive please

4. Footer Bar - Whats the best way to get reponsive centred content

I want to create a footer that looks like this one and is fully responsive thanks

Comments

MyMetta said: There is only 1 footer widget option even if you have 4 or 5 columns - how do you control what goes in each column?

Widgets are placed from left to right, not in columns. We had such a solution in the previous theme, but it was less responsive, then the current one. At least for our customers :-)

MyMetta said: I also have no idea how it will look on the page and where the content goes this way without using customizer

You can put your widgets in sidebars by customizer :-) This way you will see everything instantly. Cutsomizer -> Widgets -> Footer widget area.

MyMetta said: 2. How hard is it to add more footer widgets to your theme to control this layout - Usually you see one widget per footer column so you can see whats going into each one

You probably mean "footer sidebars"? As I have said above there is only one section(sidebar) for widgets in the footer, and all the widgets are placed from left to right, depending on number of columns you have choose in Appearance → Customize → General settings → Footer → Widgets columns number.

Changing this behaviour is probably not trivial task.

MyMetta said: The footer is not responsive in portrait mode - see your demos on a tablet - Star or Gruby will show this issue. I need the footer to be responsive please

What do you mean by this? I see 2 rows with 2 widgets each. Content is place aligned to left - maybe this brings you to believe it is not responsive?

MyMetta said: Footer Bar - Whats the best way to get reponsive centred content

It depends what you have placed there. By default it is place for text content. So if you have placed there different elements, they might not be responsive by default.

MyMetta said: I want to create a footer that looks like this one and is fully responsive thanks

3 widgets(columns) on the right should be easy, as they are available as single widgets.

As for first widget on the left, I would use for example "Shortcodes" widget, and place there

Thanks for the detailed reply. I can probably make it work using html and shortcodes but adding multiple items to a column is a challenge - as I cant add more than one widget

One issue I have now run into is that SVG images will not display in the footer area. I have tested these are working with the logo and also in a WP Post. But even if I add the media to a text widget or html it will not display in the footer.

My mistake on responsive it was late. I meant landscape mode not portrait. The footer columns dont seem to be responsive on landscape mode in mobile - tablet - they are all over the place. They stack as expected in portrait. You can see this if you go to my test site you have the details for and start shrinking the screen and look at the footer..

MyMetta said: multiple items to a column is a challenge - as I cant add more than one widget

Why? If you have 4 columns for example, add a widget that needs to be in the first column as a first and 5th widget. Although both widgets will be first column only on resolutions above 1024px.

MyMetta said: One issue I have now run into is that SVG images will not display in the footer area. I have tested these are working with the logo and also in a WP Post. But even if I add the media to a text widget or html it will not display in the footer.

Could you show me live? Maybe it is there but just lack width & height? There is also a chance it got filtered out by trusted HTML script.

MyMetta said: The footer columns dont seem to be responsive on landscape mode in mobile - tablet - they are all over the place.

It works as expected - from 3 columns it switches to 2 columns under 1024px. It may look like it is not working, because your widgets differ in height, and 3rd widgets starts new row.

Maybe you will feel better about them when we would center their content. Please try this custom CSS:

If you take a look at this site and reduce the browser size - you can see that the footer columns stay horizontal until they start stacking - this is what I would like to do please in landscape mode for mobile.

MyMetta said: If you take a look at this site and reduce the browser size - you can see that the footer columns stay horizontal until they start stacking - this is what I would like to do please in landscape mode for mobile.

I have already done that and replied:

Air said: It works as expected - from 3 columns it switches to 2 columns under 1024px. It may look like it is not working, because your widgets differ in height, and 3rd widgets starts new row.

So I am not sure what you would like exactly to happen here?Would you like to keep 4 columns for as long(up to 600px width) as on your current page?

It would require some serious overriding of current responsive styles.

MyMetta said: How do I centre the bottom footer bar text only - not the widget text please. If I choose customize>centred it changes all footer elements to centred

There are so many sizes of tablets that it is impossible to target them the way you have described it. Each device has a different size.That is why we target specific breakpoint and make sure everything looks nice on such a resolution.Targeting specific device resolution is futile in today world number of different devices that your visitors could have.

Saying mobile/tablet resolution is just way of saying "smaller screens" as users understand this better, then "lower than 1024px wide".

So if we will find a resolution that you are interested in, then I can come up with CSS that will satisfy you.

Looking at both the site and in responsinator - the footer widgets go from left aligned to centred and it looks poor in all landscape modes. A Footer is a very valuable piece of marketing real estate so it needs to look as good as the rest of the site

With that in mind, please can you help with the CSS for this:-

Footer Widget Left Aligned for

1024 px

Centred for Portrait devices412 px375 px414 px

You can take a look in responsinator to see what I mean.

I have a further footer issue so will log a new ticket as its not related