Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 19, 2020 at 3:07 pm #1176009
    Rachel

    Hi :)
    I have a website – which is still under construction.
    I would like the footer to look like this:
    footer area 1 – top right side – a picture and a text.
    footer area 2 top left side – a picture and a text.
    footer area 3 – bottom center – 2 rows of text with links.

    I have mange to do that manually with the text editor widget and 1 column.
    but unfortunately, it doesn’t look good or as I want it to look like on mobile.

    how can I make it work on mobile?
    and is there any way for you to write me the code (and where to put it on the child theme and the quick CSS so ill be able to do it if necessary on another site.

    the link to the website and login info are attached.

    thanks so match!

    January 21, 2020 at 3:50 am #1176536
    Ismael

    Hey MPPcreative,

    Thank you for the inquiry.

    You should increase the number of columns from 1 to 3, then place the widgets separately on different columns so that you don’t have to manually adjust the style on mobile view. All widgets are currently located inside a single column.

    Best regards,
    Ismael

    February 2, 2020 at 5:05 pm #1180684
    Rachel

    hi
    I think you didn’t understand me.
    I don’t want the 3 pooter eras to be one beside the other.
    I want era 1 and 2 to be beside each other and era 3 to be underneath both era 1+2.
    and both rows will fill all of the width.

    I was able to do it on the desktop by using the HTML widget and 1 footer era, but it didn’t work on a mobile screen.

    how can I control not only the columns of the footer but also the rows?

    February 4, 2020 at 11:53 am #1181229
    Ismael

    Hi,

    how can I control not only the columns of the footer but also the rows?

    There is no option for that, unfortunately. You can only control the number of columns in the Enfold > Footer panel. One workaround is to set the footer to have 3 columns, adjust the width of the first to 100% so that it’s full width and the last two columns to 47%. 

    .responsive #top #footer div .flex_column:nth-child(1) {
    width: 100%;
}

.responsive #top #footer div .flex_column:nth-child(2), .responsive #top #footer div .flex_column:nth-child(3) {
    width: 47%;
}

.responsive #top #footer div .flex_column:nth-child(2) {
    margin-left: 0;
}

    Best regards,
    Ismael

    February 13, 2020 at 2:07 pm #1184139
    Rachel

    Sorry it took me a long time to answer, but I was sick and didn’t work.
    Thank you so much! it worked :)

    February 13, 2020 at 3:12 pm #1184163
    Yigit

    Hi,

    Hope you feel better now :)

    Glad Ismael could help! Please let us know if you have any other questions or issues!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Footer visibility on mobile’ is closed to new replies.