Footer Widgets: How to change the layout for mobile

  • Resolved yabdali

    (@yabdali)


    3 years ago

    Hi,

    The footer widgets (x4) are stacked when on mobile view. How can I have for example widget1 and widget2 next to each other? I tried changing the CSS but the class names for the footer are confusing! Appreciate your help, thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • luciamarinescu

    (@luciamarinescu)

    Hi @yabdali!

    Thanks for choosing Neve!

    Please provide us the URL to your site or a screenshot with the widgets added in the footer so we can help you in a more efficient way.

    Thank you!

    Thread Starter yabdali

    (@yabdali)

    Thanks, the url is https://www.capitano.om/

    luciamarinescu

    (@luciamarinescu)

    Hi @yabdali!

    Thanks for providing the URL!

    Please insert the code below in the Additional CSS section within the Customizer. It should place two widgets next to each other, on two rows, for mobile devices.

    @media (max-width:700px){
.hfg-grid.nv-footer-content.hfg-grid-top.row--wrapper.row {
    grid-template-columns: repeat(2, 1fr) !important;
}
}

    I hope this helps!

    Have a nice day!

    Thread Starter yabdali

    (@yabdali)

    Thanks, I ended up using the following CSS as the picture widget4 was squeezed and wanted it to appear in a separate line.

    @media (max-width:700px){
.hfg-grid.nv-footer-content.hfg-grid-top.row--wrapper.row {
  display: flex;
  flex-wrap: wrap;
}
    luciamarinescu

    (@luciamarinescu)

    Great, I’m glad they look as you wanted now! Thanks for sharing your solution with the community!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Footer Widgets: How to change the layout for mobile’ is closed to new replies.