Tagged: , , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 9, 2020 at 6:56 pm #1244677
    RMConnection

    Hi Team,

    Is there any way to add a footer for when the customer is viewing on mobile? Right now my footer menu gets all condensed into one another on mobile so I am wondering If I can rearrange some of the widgets to better fit a mobile screen. Ideally, it would be my logo and bio next to our google location with the contact and categories menus below them. Let me know if this is possible or how to go about this. I looked in settings and didn’t find anything.

    Best,
    Jeff

    September 10, 2020 at 10:03 am #1244814
    Victoria

    Hey RMConnection,

    Please have a look at the following thread:

    Different footer widgets only on mobile?

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 10, 2020 at 7:42 pm #1244985
    RMConnection

    Hi @victoria,

    This is a great start! I’m wondering now how do I hide different widgets at different screen sizes? Is there some code that can do it or am I just missing a button or setting?

    Best,
    Jeff

    September 12, 2020 at 5:59 am #1245265
    Rikard

    Hi Jeff,

    That is possible with custom CSS, which widgets do you want to hide and for which screen sizes?

    Best regards,
    Rikard

    September 14, 2020 at 7:29 pm #1245815
    RMConnection

    HI @rikard,

    I would be trying to hide all of them and then put them back in new positions once at a mobile height and width.

    Best,
    Jeff

    September 16, 2020 at 4:47 am #1246147
    Rikard

    Hi,

    Thanks for the update. I’m not sure if I understand your intentions, but if you want to hide all footer widgets on mobile, then you can use this CSS:

    @media only screen and (max-width: 767px) {
#footer .widget {
  display: none;
}
}

    Best regards,
    Rikard

    September 16, 2020 at 6:55 pm #1246393
    RMConnection

    Hi @rikard,

    Sorry, that wasn’t explained well.

    When viewing it on mobile I want to hide the desktop activated widgets and display new widgets for just mobile. and when viewing from a desktop I want to hide all widgets built for the mobile version. Essentially I would have two different footer menus one for desktop and one for mobile that disappears when viewing them from the other screen size. Ideally, I would have 4 columns on desktop and 2 on mobile. I’m not sure if this is possible or not?

    Best,
    Jeff

    September 18, 2020 at 5:32 am #1246640
    Rikard

    Hi Jeff,

    Thanks for the clarification. I guess it’s possible, but it sounds somewhat complicated. Is the content going to be different in the widgets? If so then you would need to add all widgets so that we can check the ID/classes of the elements, otherwise we can’t give you accurate CSS. If you only want to change the layout of the columns on mobile, then that should be simpler.

    Best regards,
    Rikard

    September 21, 2020 at 8:09 pm #1247451
    RMConnection

    Hi @rikard,

    I would only want to change the collum and currently enabled widget layout. (from 4 columns to 2 columns) It wouldn’t actually be switching any widget’s content. Let me know what we can do to accomplish this.

    Best,
    Jeff

    September 21, 2020 at 8:14 pm #1247453
    RMConnection

    @rikard,

    I have noticed that the mobile website is no longer attempting to put 4 columns in the footer. Instead, it just puts one. I’m not sure why this is happening now and not earlier. Because of this though I am now only looking to change the order in which the footer content appears when it is in this single-column view. The map first followed by the menus followed by the logo and about section. Hope this helps.

    Best,
    Jeff

    September 27, 2020 at 12:49 pm #1248772
    Mike

    Hi,
    Sorry for the late reply, I took a look at your mobile footer and the order you wish to display them seems to be reversed, so please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) {
#footer > div {
	display: flex !important;
	flex-direction: column-reverse !important;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 29, 2020 at 12:49 am #1249190
    RMConnection

    Hi @mike,

    This is great! Is there any way to reduce the amount of blank space between widgets?

    Best,
    Jeff

    September 29, 2020 at 12:36 pm #1249355
    Mike

    Hi,
    Glad to hear, to reduce the amount of blank space between widgets please try this css:

    @media only screen and (max-width: 767px) {
#footer .flex_column.av_one_fourth {
	margin-bottom: 0px !important;
}
#footer #nav_menu-6,
#footer #nav_menu-2,
#footer #text-3,
#footer #text-2,
#footer #text-5 {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 29, 2020 at 8:12 pm #1249486
    RMConnection

    Hi @mike,

    Sweet this is perfect thank you!

    Best,
    Jeff

    September 30, 2020 at 4:02 am #1249531
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Mobile only footer’ is closed to new replies.