Before you ask please READ THIS

Footer Widgets Not Responsive & Layout

in Rife Posts: 87
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
Screenshot 2018-12-09 17.39.35.png
1920 x 1080 - 272K

Comments

  • AirAir
    Posts: 9,797
    Hey :-)
    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
    Your text

    [a13fe-socials normal="white" hover="color"]
    You can read more about social shortcode here https://rifetheme.com/help/docs/content-management/shortcodes/socials/

    Hope that will help :-)

    With kind regards.

  • Hey Guys

    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


  • AirAir
    Posts: 9,797
    Hey:-)
    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:
    @media only screen and (max-width: 1024px) {
    	#footer .widget{
        text-align: center;
    	}
    	#footer .widget h3.title{
    		text-align: center;
    	}
    }
    With kind regards.
  • Hi

    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 :)
  • Hi sorry - I just saw the footer widget text change bit! :)
  • AirAir
    Posts: 9,797
    Hey Samantha:-)
    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
    Use this custom CSS:
    #footer .f-links, #footer .foot-text {
        float: none;
        text-align: center;
        max-width: none;
    }
    MyMetta said: How do I change the footer font size for the widgets only not the bottom bar as I see this is changed in customizer
    Make use of option Customize → General settings → Footer → Font size in lower part - it only changes font size for bottom bar.

    With kind regards.
  • Hi and Thanks and Wishing you all a very festive holiday season :)

    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

  • AirAir
    Posts: 9,797
    Hey :-)

    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:
    @media only screen and (max-width: 480px) {
    	.widget{
    		text-align: left;
    	}
    	.widget h3.title{
    		text-align: left;
    	}
    	.widget .socials{
    		text-align: left;
    	}
    }
    With kind regards.
  • edited January 7 Posts: 87
    Hi Happy New Year All :)

    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
    @media only screen and (max-width: 480px) {
    	.widget{
    		text-align: left;
    	}
    	.widget h3.title{
    		text-align: left;
    	}
    	.widget .socials{
    		text-align: left;
    	}
    }
    #footer .f-links, #footer .foot-text {
        float: none;
        text-align: center;
        max-width: none;
    }
    How do I get center on portrait?

    Please can you help?

    TIA
    Post edited by Air on
  • AirAir
    Posts: 9,797
    Hey :-)


    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.
  • Posts: 87
    Hi

    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
  • AirAir
    Posts: 9,797
    Hey :-)

    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:
    412 px
    375 px
    414 px
    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.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion