Size of elements on a responsive page

Question

I am in a very complicated situation, I have researched in several places and I do not know if I am researching right, however, my doubt is the following:

On many sites we have the following composition setting on a page: a header with the name of the site, a navigation bar below the header, a body with content below the navigation bar and finally a footer below the body.

However there are several doubts that surround me with regard to this.

Since I would have columns one below the other, the mobile would play the size of the column on the whole screen, but on the desktop if I assign a size in percentage to the columns, then, this would also have effect on the mobile and would look horrible.

On the other hand, if I do not set any size for the <div> and let them behave according to the amount of content, this would be strange, because depending on the body text a <div> content would vary in size and mine <footer> would jump up and down.

Answer 1

In the tags you indicate that your doubt is related to Bootstrap 3. So you need to understand the concept of grid Examples to solve your question. Other concepts are margin and padding, but the grid is the most important here.

I also assumed that you have some knowledge of creating non-responsive websites.

And that’s the problem.

After 15 years making websites with <table> and then with the CSS before CSS3, I also had a hard time understanding things like this.

I noticed that you speak in columns below each other... Columns are next to each other. Lines are below each other.

In bootstrap you nest columns within rows.

  <div class="row">
    <div class="col-md-4">coluna 4/12 = 1/3</div>
    <div class="col-md-4">coluna 4/12 = 1/3</div>
    <div class="col-md-4">coluna 4/12 = 1/3</div>
  </div>

  <div class="row">
    <div class="col-md-3">.coluna 3/12 = 1/4</div>
    <div class="col-md-4">coluna 4/12 = 1/3</div>
    <div class="col-md-5">coluna 5/12</div>
  </div>

This code creates two rows, each with three columns.

The first row has 3 columns of the same width, each one a third the size.

The second row also has 3 columns. each with a different size.

Did you notice that I divided it by 12? It’s because the grid of bootstrap does this. It divides the width of the screen into 12 parts.

You must have noticed the md. This is a class modifier that indicates that this rule applies to medium monitors (think tablet) up.

That is to say col-md-3, can be read as occupy a room (3/12=1/4) if device screen is average.

Now, think about mobile first, because bootstrap rules are applied from bottom to top (in terms of size).

If you use col-sm-7 will be saying occupy 7 spaces 12, when the screen is small.

So do not set absolute or percentage sizes for div. Understand the grid and adapt the site layout to use it.

In responsive design, you can create a layout version for each screen size (old-fashioned, frameworks like boostrap) and have the biggest headache to keep things going. Or you can better understand the concept and make a single code for any device.

Concepts to be studied: grid, margin and padding. Boostrap website in Portuguese