HI All
I have a few questions re the footer 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
see screenshot thanks
Comments
You can put your widgets in sidebars by customizer :-) This way you will see everything instantly. Cutsomizer -> Widgets -> Footer widget area.
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.
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?
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.
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 You can read more about social shortcode here https://rifetheme.com/help/docs/content-management/shortcodes/socials/
Hope that will help :-)
With kind regards.
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..
Thanks
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: With kind regards.
Thanks for the quick reply.
Ive added your CSS but still have the same issue.
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.
https://www.socialflyny.com/
I will have 4 or 5 columns.
Im on local dev only for the next few days.
New Footer Questions :`
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
How do I change the footer font size for the widgets only not the bottom bar as I see this is changed in customizer
Thanks
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.
Use this custom CSS: Make use of option Customize → General settings → Footer → Font size in lower part - it only changes font size for bottom bar.
With kind regards.
This works but the whole footer widget is centred again on mobile - tablet and under - is there a way to not centre the footer widgets at all please?
See dev site - same url as before
We are centering all content of widgets on mobiles because they don't look good otherwise.
For tablets, please remove CSS I gave you in this post https://support.apollo13.eu/discussion/comment/23271/#Comment_23271
To remove centering on mobile you can add such custom CSS to reset this behavior: With kind regards.
Widget Text CSS Alignment
I do want centre aligned on mobile phones and tablets portrait and phones
But
I want to have left aligned on tablet landscape mode and all landscape modes before its mobile phone size - I dont know what this breakpoint is or the CSS to add for this
This is my new CSS for all of the footer How do I get center on portrait?
Please can you help?
TIA
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.
So do you have any specific device in mind?
With kind regards.
Thanks. The issue is a lack of consistency between devices.
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 devices
412 px
375 px
414 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
Thanks a lot
But this how it works by default in the theme:-) Please see Unicorn demo https://rifetheme.com/unicorn/
Widgets are centered below 480px width so it covers your: And above 480px they are aligned left what cover your 1024px.
However, it seems you have modified this behavior with custom CSS in your child theme.
Maybe I am missing some important information? :-)
If you like how it behaves in unicorn demo, then just remove your custom CSS.
With kind regards.