How to correct Mobile view Footer menu formatting in Dawn?

[jonnbama]

I am building a website for my wife that is using the Dawn 2.0 theme, and I am struggling with getting the footer menu formatting right.

The first picture shows how the footer menu appears on a desktop, and how it appears on Mobile when in landscape mode. The 2nd image is what the footer menu looks like from a mobile in Portrait mode. The formatting moves everything into a long jumbled, non-legible column that is just worthless.

The footer menu is actually made up of 5 blocks that I added, and then created a different menu for each block. This was recommended in a previous question where i was trying to make my menu look like it does on the desktop view below. I also added the following code to section-footer.css as recommended to change the width of the blocks.

Here is the sites info.

LUXX Junkie ~ Where Makeup Becomes an Addiction!

Testing1234

.footer-block.grid__item.footer-block--menu {
    width: 50%;
    float: left;
}
a.link.link--text.list-menu__item.list-menu__item--link {
    padding: 2px;
}

What can I do to correct this formatting issue in mobile portrait? My wife wants the menu to behave like the example below. The 1st pic show the desktop footer menu, and the 2nd shows mobile view in portrait. How can I make our footer menu in mobile look similar to the 2nd pic below? Or is there a way to have a different menu open when using a mobile device?

Any help is greatly appreciated.

[ProtoMan44]

@jonnbama Hey, thanks for posting here.

i hope you’ll understand from SS , otherwise let me know.

[ProtoMan44]

@jonnbama and if you need the collapsible tabs in the footer it is a time-consuming task but it is possible.

[jonnbama]

Thank you for your detailed response. I was able to make the outlined changes in developer mode to make it look very close to the images you provided. The problem I am having now is that I need the footer menu to remain horizontal like the image below when on a laptop/desktop/landscape mode. I only needed the footer menu to stack vertically when on a mobile device, or when your browser window narrowed.

Here are screenshots I took as I was implementing the changes in developer mode. I have not made any edits to code yet in shopify yet.

If you have any advice on how I can make the footer menu horizontal on a desktop/laptop and even in mobile landscape view if possible, with being vertical on mobile/portrait mode it would certainly be appreciated.