CODEWITHSUNDEEP
css
Manel Alonso
Manel Alonso

Reputation: 397

Resize ul and li element with text to window size

So I'm developing a web page, and I'm making it now responsive. I managed to get everything responsive except the main menu nav.

It's a ul element and it has li inside with text. Here are some pictures about the problem

Full webpage:

enter image description here

On mobile:

enter image description here

I just want to adjust the text or the ul element to fit without making another line.

Here's the css ul element:

.main-menu ul {
    display: table !important;
    background-color: #98B709;
    padding: 0;
    margin: 0;
    text-align: center;
}

And the li element:

.main-menu ul li {
    display: inline-block;
    float: left;
    position: relative;
    list-style: none;
}

I tried a lot of things but nothing works...

Thanks and hope you guys can help me!

Upvotes: 1

Views: 5738

Answers (3)

elendee
elendee

Reputation: 11

Here is a variation that does not use display:table, which I always avoid.

The important bit you can play with is the 'width' of the 'li' element. If you really want to squash them all on one line, you can make this a very small %.

If you do use the second line, the 'text-align:center' in the 'ul' element will keep everything centered, instead of floating left as you have it now.

I use this code block all the time; it's a common problem.

#main{
width:100%;
}

#main ul {
display: block;
text-align: center;
width: 100%;
padding: 0;
margin: 0;
}

#main li {
width:10%;
list-style: none;
display: inline-block;
padding: 0;
margin: 8px;
}

Upvotes: 0

Ryuk
Ryuk

Reputation: 75

Try to use different font size e.g

vw Relative to 1% of the width of the viewport

vh Relative to 1% of the height of the viewport

Upvotes: 0

sebisnow
sebisnow

Reputation: 2077

I found a very useful Stackoverflow post that should answer your question:

Responsive Font Size

And I experienced that changing font size and other problematic parts from px to em generally helps to make is more responsive too.

Upvotes: 1

Related Questions