List gets small when resize the window

HTML & CSS
1

He guys i wanna fix it this issue

#page
{
    width: 100%;
}
header
{
  margin-bottom: -3px;
   
}
.menu
{
    
    width: 10%;
    height: 235px;
    float: left;
}

.content
{
    height: 900px;
}

/*Links buttons*/
a:link, a:visited {
    background-color: #353839;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: block;
    border: 1px solid #555d50;
    font-size: 24px;
  }
  
  a:hover, a:active {
    background-color: #006400;
  }
/*Lists*/
ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
 
}
/*Font*/
*
{
    font-family: Verdana; 
}
2

We need to be able to see the code that demonstrates the problem. CSS alone is not enough.

You could post a link to your site or build a CodePen that demos the problem OR post a “working page”… something that we can open in our browsers and will allow us to see the problem.

NOTE: Full URLs to outside resources are required, of course. :slightly_smiling_face:

4 Likes
3

Without the HTML script one can only guess as to where the CSS is applied.

A link to an online test page would be better.

2 Likes
4

Without html as others have mentioned we can only guess but these 2 rules are bound to cause trouble

.menu
{
    width: 10%;
    height: 235px;

}

.content
{
    height: 900px;
}

You rarely want a height on content and certainly not a magic number like 900px.

The 10% width on the menu is going to be very small on smaller screens and unlikely be of any use to you if it holds real content.

As others have said if you post a working demo I’m sure we can help point you in the right direction and best coding practices.

Also note that setting the font-family like this is bad practice.


/*Font*/
*
{
    font-family: Verdana; 
}

That will kill inheritance on any section of elements that you want to use another font family. You can use it as long as you understand what it is doing and why you are doing it.

The safest way to set the font family is on the body element although you will need to include form controls as well.

e.g.

body{
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
input, select, textarea, button{font-family:inherit;}
6 Likes
5

Sorry guys, i’m new. Here is the codepen of my web page

6

I understand, i’m alredy reply with the codepen of my web site.

7

You can add a min-width to the menu to stop it getting smaller.

e.g.

.menu {  
  width:10%;
  min-width:200px;
  /*height: 235px;*/
  float: left;
}

You don’t need the height at all.

You don’t really want a section element inside your div class=“menu”. You could have lost the div anf just add the menu class to the section. However it would be more semaantic to use a nav element.

e.g.

 <nav class="menu">
      <button id="button" hidden onclick="cbshow_menu()"><img src="images/list.png"></img></button>
      <ul id="menu_list">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Sobre mĂ­</a></li>
        <li><a href="#">Proyectos</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>

That replaces the div and the section elements.

We don’t really use floats these days for structural elements and flexbox would be better and avoid all the clearing issues (unless indeed you are wrapping content around a floated menu. list).

You don’t need the width:100% on #page as it will be full width by default (to be explicit the width will be auto which for a block element will fill the available space).

Also bear in mind the other issues I pointed out in my first post :slight_smile:

3 Likes
8

Thanks! I’m creating my first project with HTML, CSS and JavaScript. It’s my portfolio actually and I want to improve my practices to a professional level.

9

Normally, you create a portfolio AFTER you have mastered the basics. :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.