Size of the elements in a responsive page

Question

Size of the elements in a responsive page

Navigation

#1 by (0 votes)

0

I'm in a very complicated situation, I've researched in several places and I do not know if I'm researching right, however, my doubt is this:

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

However, there are several questions that surround me about this.

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

On the other hand, if I did not set any size for <div> and let them behave according to the amount of content, that would be strange, because depending on the body text the <div> content would vary of size and my <footer> would be jumping up and down.

html css bootstrap-3

asked by anonymous 14.04.2017 / 19:18

1 answer

Post types by taxonomies Does anyone know how to solve this problem: can not load such file - rubygems.rb (LoadError)

score 0 · Answer 1

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

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

And this is the problem.

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

I noticed that you speak in columns one beneath the other ... Columns stand side by side. Lines are one below the other.

In the 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 lines, each with three columns.

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

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

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

You may also have noticed md . This is a class modifier that indicates that this rule applies to average monitors (think tablet).

That is col-md-3 , it can be read as a quarter (3/12 = 1/4) if the device screen is average.

Now, think of mobile first , because the bootstrap rules are applied from the bottom up (in terms of size).

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

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

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

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