Question

I am currently working on a mobile website and I could use some help with its footer.

Here is an image of how its supposed to look:

https://i.stack.imgur.com/alH8M.jpg

It should have the following:

1) the width needs to work on different mobile devices so it cant be fixed

2) the margin to the left of home and to the right of newsletter should be equal

3) if the devices width isnt big enough for the footer to be displayed in one line, the links should be displayed in multiple “lines”. What im trying to say is, there should be no horizontal scrolling

Ive been fiddling around for ages now and cant get it to work. Heres some basic code to get started:

<nav>
    <ul>
        <li><a href="">Unternehmen</a></li>
        <li><a href="">Kompetenz</a></li>
        <li><a href="">Produkte</a></li>
        <li><a href="">Partner</a></li>
        <li><a href="">News</a></li>
    </ul>
</nav>

Thanks in advance to anyone who can help me!

Answer 1

nav { background: #016d9b; }
nav ul { text-align: center; padding: 0; }
nav ul li { display: inline-block; border-right: 1px solid white; padding: 0 10px; margin: 10px 0; }
nav ul li:last-child { border-right: none }
nav ul li a { color: white; text-decoration: none; }

ul with text alignment to the center and li displayed as inline block.

I think this should handle.