Min-width overriding max-width

HTML & CSS
1

Hey,

I recently wanted to make the navigation of the website more responsive so that I don’t have to use an additional extra menu for tablets but only for smartphones.
I used max-width and min-width but somehow when I set them both to different values it always takes the min-width value instead of the max-width value although there is enough space left.

I uploaded the website here: http://www.phermann.tk/tts/

Thanks.

2

Hi,

It’s not clear what problem you are seeing as I can see that #navigation has a min-width of 790px and a max-width of 1070px as expected.


#navigation {
padding: 0;
max-width: 1070px;
min-width: 790px;
height: 160px;
margin: 0 auto;
text-align: center;
background: red;/* for testing */
}

That means the nav will get no smaller than 790px and no larger than 1070px. What were you expecting to happen or am I looking at the wrong thing?

3

It’s my fault I didn’t say what’s meant.

The UL is like a frame for the LIs. When you add the LIs min-width-values together, you will get the min-width of the ul. And when you add the max-widths together, you will have the value of the max-width of the UL.
The problem is that the LIs don’t change their width, they stay at the value of min-width. The UL transforms perfectly fine when resizing the browser, but the LIs don’t so that there is some place left in the ul.
Sorry for me missing explanation.

4

Hi,

I’m not still clear on what you want to happen but just because you set a max-width on an element doesn’t mean that the element will stretch to that width automatically unless it is a block element. Inline-block elements are content width only unless you specify a width for them. They will only reach the max-width if their content is that wide of if you have set the width.

If you are trying to distribute that menu over the available space then you would be better off width display:table and display:table-cell instead and let it happen automatically.

e.g.


#navigation{
display:table;
width:100%;
height: 160px;
margin: 0 auto;
max-width: 1070px;
min-width: 790px;
padding: 0;
text-align: center;
}

#navigation li{
display:table-cell;
max-width:none;
min-width:0;
}
5

Ah thanks I got it now. Changed some values and now it works almost fine.

Image in the li .logo is wider than the li itself when you resize the browser window. I set a min-width value for the li .logo so that it won’t be any smaller than the image contained but it somehow does not work.
Would be great if you had one more look at it. Updated the site.

Thanks

6

Sorry for the delay I must have missed this post.

Can you clarify what the problem is as I’m not seeing anything strange. You don’t need any widths,min or max either when using display:table-cell because the browser will do best fit all by itself. A cell will always hold its content no matter what width you give it (unless using table-layout fixed algorithm).

I think you may be referring to something else though:)

7

I made some screenshots which show that the width of the image is wider than the width of the li.

8

HI,

I’d do something like this:


#navigation li.logo img{
height:auto;
width:98%;
}
#navigation li.logo a{
display:block;
width:100%;
max-width:260px;
text-align:center;
margin:auto;
}
#navigation li.logo{background:red}/* for testng only */
9

Yes thanks thats exactly how I wanted it to be. Thank you for your support.

I guess we will see again when I will code the smartphone navigation :smiley:

Thanks! Paul

10

Hi its me again :D,

I decided to not bring the whole website with the slider etc. to the mobile view because when someone needs a taxi he does not care about fancy pictures and a slider with high quality images that would take ages to load anyway.

So I thought of a layout that has the SVG logo, the navigation and then a button to call the taxi driver right from the browser (there is a way to link the telephone number to the telephone app on iOS/Android). The other sites are available but they don’t appear on the landing page.

What I was actually doing was to hide all the content that was on the tablet/desktop view and craft a new navigation UL and a content section.
When viewing from desktop or tablet those menus and contents are hidden via display: none. I thought I could make them visible again with the display: relative tag but somehow the display: none overrides the relative value although its not the first declaration of the display: (…).
When you load the mobile page you won’t see any content. Because the display: none tag overrides the display: relative tag which was made in the media query.
I uploaded the website here: http://www.phermann.tk/tts

Please don’t look at the style yet I just wanted to make a prototype for the layout and then perfect it with the styling etc.
Thanks for helping!

11

Hi,

There isn’t a ‘relative’ value for the property ‘display’. The opposite of display:none is usually ‘display:block’ (assuming you want to make block level containers. )

If you use display:block in your media query it should turn the element back on again.

12

Thanks. I tried this as well but when I bring them both to display: block they might show up again, but somehow the responsiveContent does not go right under the navigation. It is behind the navigation and I don’t know why.

Thanks!

13

HI,

I’m not sure what you mean about “might show up again”?

You need to bring your navigation back into the flow and also make the image fluid like this:


@media only screen and (max-width:768px) {
	header {
	position:static;
	height: auto;
	width:auto;
}
.responsiveNavigation img{
	width:100%;
	height:auto;
        max-width:259px;	
}
}
1 Like