css Question posted in
Some basic documentation can be found here.

What is wrong with my css command which change parts of menu to new lines when screen is lower than x px?

I would like to change menu when is screen width lower to display menu link each in own line but when I use this, it is still same in one line.
Then menu.jinja is used in another .jinja site where is link to style.css. Is there anything bad in my css command?

style.css

    @media (max-width: 1000px) {
    .menu ul li {
        margin-right: 20px;
        padding: 10px; 
        display: block;  //main function
        
    }
}

menu.jinja

<div class="header">
        <div class="menu">
            <ul>
                {% if 'role_idone' in session and session['role_idone'] == 1 %}
                    <li><a href="{{ url_for('user_manage.user_manage"
                {% endif %}
               <li><a href="property_manage.jinja">Property manage</a></li>
               <li><a href="building_manage.jinja">Building manage</a></li>
         
            </ul>
        </div>
    </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    There wouldnt be display: flex; in other .menu parts and I changed max-with to min-width and now it works.


  2. 0

    I would write:

    .menu ul li {
    margin-right: 20px;
    padding: 10px; 
    display: inline-block;  //main function
}

    Otherwise, you can go through the list of ‘display’ options in the Dev Toolbox of your browser and choose the most convenient ‘display’ option.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search