Content

1 Positioning of elements

Positioning of elements

Positioning 'classic' elements is based on the model of blocks, which are placed to fill the page space from left to right and top to bottom

However, this model does not adapt well on mobile devices, where we will encounter problems with the size, orientation in the browser and even in the reordering of the elements to fit the type of device

To solve these problems appeared model of flexible positioning, which simplifies these tasks considerably

However, this model is too detailed to organize the overall structure of the website

For that reason, the model grid, which divides the space into a virtual grid and creates an array divided into cells within that grid, assigning the elements to a particular cell that will occupy so many additional cells depending on the size and orientation of the device

These two models are supported in addition to the so-called responsive design, which allows our website to adapt to the device on which it will be viewed: smartphones, tablets or desktop PCs

Model block

The boxes of the elements are placed by default following the 'normal flow', that is, pushing the boxes left and up

You can use the property position to modify the 'normal flow‘:

position: static it is the mode of positioning by default
The box will occupy the position of the 'normal flow‘
position: relative using the properties top, right, bottom and left move your position
These dimensions indicate the spacing that is left to each side in accordance with the original position of the box
The rest of the boxes are not affected by this displacement, so they respect their reserved space
position: absolute it removes the box from the normal flow and placed the new box in a fixed position with respect to its containing box
Supports the properties top, right, bottom and left
You can overlap other elements because it is not respecting your space reserved
position: fixed similar to absolute positioning, but you specify the position relative to the window
This implies that the box maintains its position and does not move when using the scroll bar
position: float the box is shifted to one side using the properties left or right, moving it to one end of the containing box or to the first floating box it finds in that direction
May overlap with other elements that are not floating boxes
clear will only apply if there are floating boxes, for force the item to be displayed under the floating box of a certain type with the properties left or right; or anyone with both

<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'/>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div id='a'></div>
       <div id='b'>
           <div id='c'></div>
       </div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing
       elit. Maoires est voluptas dolorem quod id neque
       esse doloribus saepe ut reprehenderit possimus fugit.
       Laudantium distinctio doloribus repellendus quibusdam
       voluptatem recusandae aut</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing
       elit. Doloremque nam illum eveniet iste commodi culpa
       vel quibusdam sint veniam itaque provident sed ipsum
       reiciendis labore beatae impedit vitae earum aut</p>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1716131213&k=352aa8ef5d5860632b96a4ebcc864ac6"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1716131213&k=352aa8ef5d5860632b96a4ebcc864ac6&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body> 
</html>

Let's use this sample html to be able to check the use of the block model, for this we will use as a basis, the following sample style sheet:

div#a {
    background: blue;
    width: 2em;
    height: 4em;
}

div#b {
    background: red;
    width: 4em;
    height: 2em;
}

div#c {
    background: pink;
    width: 1em;
    height: 1em;
}

p{
    font-size: 80px;
    background: yellow;
    margin: 0;
    padding: 0;
}

A large font size was intentionally used to force scrolling. Now perform the following exercise so you can check for yourself how the block model works:

Change the positioning of the block a a relative and asignale spacing top of 1em and a spacing left of 2em

The blue block will overlap the red block, but the reserved space that should have occupied the blue block is preserved
Change the positioning of the block c a relative and asignale spacing top of 1em and a spacing left of 2em

The pink block will change its position relative to its container (the red block)
Change the positioning of the block a a absolute and asignale spacing top of 1em and a spacing left of 2em

The blue block will overlap the red block, but since no space has been reserved for the blue block, the red will be placed in the upper left corner
And if we scroll, the blocks will no longer be visible
Change the positioning of the block a a fixed and asignale spacing top of 1em and a spacing left of 2em

The blue block will overlap the red block, but since no space has been reserved for the blue block, the red will be placed in the upper left corner
And if we scroll, we will see that the blue block has been fixed in its position with respect to the window
Change the positioning of the block a a float: right

The blue block will overlap the other elements, have been placed on the right edge of the screen and no space has been reserved for that block
Change the positioning of the block c a float: right

The pink block will stick to the right side of your container, the red block
Change the positioning of the block b a float: right

The red block will stick to the right side of the previous floating element, the blue block
Change the positioning of the block a a float: left and added to p the property clear: right

The paragraph will be placed under the red block, but will overlap the blue block
Change the positioning of p a clear: both

The paragraph will be placed below the blue block

Flexible model

The flexible positioning allows you to accommodate the elements of the page according to changes in the dimensions and orentación of the page

It allows us to make a responsive design for our web pages you envisage properly in any device

This standard is relatively recent and is not yet supported by all browsers, but in the future it will be

As advantages you get a more readable and simple code, where you can change the order of the elements regardless of the order in the HTML code

The flexible model is appropriate for placing small components of a web page

To make a general arrangement of the elements of the page, the grid model is being imposed

The main idea is that a flexible container expands or compresses to fill the free space or to fit the available area

So we'll have a flex container and a series of flex item

To define a container, we will use the property display: lex (or display: kit-web.flex if we want Safari support)

All the elements will be elements flex

This model does not use concepts such as horizontal or vertical sorting, but defines a main axis and a secondary axis (cross axis)

This easily adjusts the design to the device's orientation changes

For each axis we can place the components at their start (main-start or cross-start) y final (main-end or cross-end)

<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'/>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div id='cont01' class='container'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont02' class='container'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont03' class='container'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont04' class='container'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1716131213&k=352aa8ef5d5860632b96a4ebcc864ac6"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1716131213&k=352aa8ef5d5860632b96a4ebcc864ac6&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

Let's use this sample html to be able to check the use of the flexible model, for this we will use as a basis, the following sample style sheet:

.container {
    width: 400px;
    border-style: solid;
    border-color: #3F51B5;
    border-width: 4px;
    margin-top: 15px;
    display: flex;
}

.container>div {
    background-color: #FF4081;
    color: white;
    text-align: center;
    width: 50px;
    height: 50px;
    font-size: 3em;
    margin: 4px;
}

Direction of the elements

The property flex-direction specifies the direction of the main axis, that is, how elements are placed inside the container

Supports the following values:

row
row-revese
column
column-reverse

To check its behavior, add the following CSS to the previous example:

#cont01 {
    flex-direction: row;
}

#cont02 {
    flex-direction: row-reverse;
}

#cont03 {
    flex-direction: column;
}

#cont04 {
    flex-direction: column-reverse;
}

Fit in the main shaft

The property wrap sets whether items need to be adjusted for display in a single row (or column)

Supports the following values:

nowrap adjust the elements to a line
wrap adjusts the items but without changing its size
wrap-reverse adjusts the elements but without resizing them, but in the reverse order of rows

To check its behavior, add the following HTML to the previous example:

<div id='cont05' class='container'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div id='cont06' class='container'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div id='cont07' class='container'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

And the following CSS:

#cont05 {
    flex-wrap: nowrap;
}

#cont06 {
    flex-wrap: wrap;
}

#cont07 {
    flex-wrap: wrap-reverse;
}

Alignment of the content

With the property justify-content we can align the elements with respect to the main axis of the container

Allows us to decide what to do with the remaining space

Supports the following values:

flex-start board items at the beginning of the axis
flex-end board items at the end of the shaft
center centers the elements
space-between divides the space between the elements, leaving the ends attached to the edge
space-around all of the remaining space is distributed around each element

To check its behavior, add the following HTML to the previous example:

<div id='cont08' class='container'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont09' class='container'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont010' class='container'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont011' class='container'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont012' class='container'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

And the following CSS:

#cont08 {
    justify-content: flex-start;
}

#cont09 {
    justify-content: flex-end;
}

#cont10 {
    justify-content: center;
}

#cont11 {
    justify-content: space-between;
}

#cont12 {
    justify-content: space-around;
}

Fit on the secondary axis

To align the elements with respect to the secondary axis, we have the property align-items

Supports the following values:

strech to occupy all the width
flex-start aligns elements to the beginning of the axis
flex-end aligns items to the end of the shaft
center centers the elements

To check its behavior, add the following HTML to the previous example:

<div id='cont013' class='container highContainer'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont14' class='container highContainer'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont015' class='container highContainer'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont016' class='container highContainer'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

And the following CSS:

.highContainer {
    height: 100px;
}

#cont13 {
    align-items: strech;
}

#cont14 {
    align-items: flex-start;
}

#cont15 {
    align-items: flex-end;
}

#cont16 {
    align-items: center;
}

Properties of the elements

Up to now we have seen properties to configure the main container

Now let's list some very interesting properties to manipulate the elements:

order indicates the order in which they appear the element within the container
In this way it will not be necessary to modify the HTML to reorder the elements, since we will do it by code
flex-grow sets the growth factor item
That is, how it grows in relation to the other elements, as long as the container has free space
flex-shrink sets the factor of shrinkage item
That is, how it decreases in relation to the other elements, as long as the container has free space
flex-basis indicates the default size (width) before the free space of the container is distributed
Normally its default value is left: flex-basis: auto

There is a short form for the properties flex-grow, flex-shrink and flex-basis, simply specifying the value they will take: flex: 1 1 auto

To check its behavior, add the following HTML to the previous example:

<div id='cont017' class='container'>
    <div id='item1'>1</div>
    <div id='item2'>2</div>
    <div id='item3'>3</div>
    <div id='item4'>4</div>
    <div id='item5'>5</div>
</div>

And the following CSS:

#item1 {
    order: 3;
}

#item2 {
    order: 1;
    flex-grow: 2;
}

#item3 {
    order: 2;
}

#item4 {
    order: 5;
}

#item5 {
    order: 4;
}

Model grid

Although the box model flexible allows you to create sites adaptive thanks to the media queries, the model that is being imposed is the grid

In this model, the screen is divided into a grid is virtual, and the designer can choose how many cells of that grid will occupy each element depending on the device

This design has been popularized thanks to Bootstrap created by the developers of Twitter

In Bootstrap the available space is divided into 12 columns of equal size

For each item indicate how many columns will occupy depending on the size of the device

For example, for a sidebar we can indicate that it occupies 2 columns on a desktop, 6 columns (half the total width) for tablets and 12 columns (the entire width) on mobile devices

To achieve this, a set of classes will be used, in this example they would be: .col-md-2, .col-sm-6 and .col-xs-12

Sizes are defined in Bootstrap how to:

xs (extra small)
Screens with width lower than 768px format
The vast majority of smart phones
sm (small)
Screens with a width less than 992px
If the xs class has been defined and the size less than 768px, then that class will be applied
md (medium)
Screens between 992px and 1200px
This range represents the majority of desktop browsers
lg (large)
Screens very big with a width over 1200px
They are usually large high-definition screens

<div class='col-xs-12 col-sm-6 col-md-8'>
    12 cols smartphone, 6 tablet, 8 PC
</div>
<div class='col-xs-6 col-md-4'>
    6 cols smartphone (y tablet), 4 PC
</div>

As you can see in the example, the content is organized into rows (row class) and within these rows we will create the columns with the desired sizes

Media Queries

A media query allows you to use the rules of style sheets depending on the characteristics of the medium (width, height and color)

They were added from CSS3, allow the presentation of the content to adapt to a specific scrape of output devices without having to change the contents and are the basis of adaptive design

They can be used in two ways: by importing a style sheet or by applying them within the same style sheet

Importing style sheets

We can use the media queries to choose different CSS depending on the medium or the characteristics of the same

Currently there are only two supported means:

screen a browser
print a printer

<link rel='stylesheet' media='screen' href='browser.css'>
<link rel='stylesheet' media='print' href='printer.css'>
<link rel='stylesheet' media='(max-width: 800px)' href='tablet.css'>

As can be seen in the example, defining the media type is as simple as adding the attribute media within the element link

It is also possible to indicate conditions about the media type, in the example we have told you to load when the media has a width less than 800px, so that you can use it with tablets

Rules @media

The rules @media allow us to indicate on what media type should apply certain CSS rules

Its generic sintasix is:

@media [mediatype and] (media feature) {
   CSS-Code;
}

The only mediatype supported are screen and print, as we've seen before

@media (min-width: 700px) { ... }

@media (min-width: 700px) and (orientation: landscape) { ... }

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

As can be seen in the example, media feature allow us to indicate characteristics of the device, and you can add conditions by using logical operators and, not and only

We can using the media feature specify the size of the device, its temptation or resolution, number of colors, etc

Some of the highlights are:

aspect-ratio width/height of the device
min-aspect-ratio minimum width/height of the device
max-aspect-ratio maximum width/height of the device
color-index number of colors the device can display
width exact width
min-width minimum width
max-width maximum width
height high exact available
min-height minimum height available
max-height high maximum available
orientation orientation, supports values:
- landscape
- portrait

Adaptive layout with Media Queries

Let's see two examples with media queries to understand how to make our own adaptive designs, one with the flexible model and another with the model grid

Adaptive layout with the flexible model

In the following example, we create an adaptive layout with the flexible model is very easy

Because we can take advantage of the possibility to reorder the items on that offers us this option

Let's start from a 3-column layout with the navigation bar, the main content and a sidebar

When the size of the browser is less than 640px will go to a single column

The HTML we'll use in the example is as follows:

<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
        <link rel='stylesheet' type='text/css' href='flexible.css'>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <header>This is the header</header>
       <div id='principal'>
           <article>Content</article>
           <aside>Sidebar</aside>
           <nav>Navigation bar</nav>
       </div>
       <footer>This is the foot of the page</footer>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1716131213&k=352aa8ef5d5860632b96a4ebcc864ac6"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1716131213&k=352aa8ef5d5860632b96a4ebcc864ac6&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

The CSS code in the flexible.css file that we'll use in the example is as follows:

header {
    height: 10%;
    background-color: lightblue;
}

#principal {
    display: flex;
    flex-flow: row;
    align-items: stretch;
    min-height: 80%;
}

nav {
    background-color: lightgray;
    flex: 1 6 20%;
    order: 1;
}

article {
    background-color: lemonchiffon;
    flex: 3 1 60%;
    order: 2;
}

aside {
    background-color: ligthsalmon;
    flex: 1 6 20%;
    order: 3;
}

footer {
    background-color: ligthgreen;
    height: 5%;
}

@media all and (max-height: 640px) {
    #principal {
       flex-flow: column;
    }

    article {
       order: 1;
    }

    aside {
       order: 2;
    }

    nav {
       order: 3;
    }
}

Adaptive design with the model grid

In the following example, we create an adaptive layout with the model grid is very easy

One of the main limitations is that no longer that we can reorder the elements

We are going to use a grid of type Bootstrap

To do this we will use the classes cols-xs-12 to indicate that in small size the element will occupy 12 columns, col-sm-8 will occupy 8 columns for a small size and col-sm-2 will occupy 2 columns for a slightly larger size

For the change of size small to large has been assigned 768px format

The HTML we'll use in the example is as follows:

<html>
    <head>
<!-- Inserted by miarroba -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
        <link rel='stylesheet' type='text/css' href='grill.css'>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div class='row'>
           <header class='col-xs-12 col-sm-12'>This is the header</header>
       </div>
       <div class='row' id='principal'>
           <nav class='col-xs-12 col-sm-2'>Navigation bar</nav>
           <article class='col-xs-12 col-sm-8'>Content</article>
           <aside class='col-xs-12 col-sm-2'>Sidebar</aside>
       </div>
       <div class='row'>       
           <footer class='col-xs-12 col-sm-12'>This is the foot of the page</footer>
       </div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1716131213&k=352aa8ef5d5860632b96a4ebcc864ac6"></script><noscript><img alt="beacon" border="0" width="1" height="1" src="https://hosting.miarroba.info/?__muid=&h=1579157&t=1716131213&k=352aa8ef5d5860632b96a4ebcc864ac6&img=1" /></noscript>
<!-- Inserted by miarroba -->
</body>
</html>

The CSS code in the grill.css file that we'll use in the example is as follows:

header {
    height: 10%;
    background-color: lightblue;
}

#principal {
    min-height: 80%;
}

nav {
    background-color: lightgray;
    height: 20%;
}

article {
    background-color: lemonchiffon;
    minheight: 80%;
}

aside {
    background-color: ligthsalmon;
    height: 20%;
}

footer {
    background-color: ligthgreen;
    height: 5%;
}

.row: after{
    clear: both;
}

.col-xs-12 {
    float: left;
    width: 100;
}

@media all and (max-height: 768px) {
    .col-sm-2, .col-sm-18, .col-sm-12 {
       float: left;
    }

    .col-sm-12 {
       width: 100%;
    }

    .col-sm-8 {
       width: 66.6667%;
    }

    nav, aside {
       height: 80%;
    }
}

Cookie	Duration	Description
CookieLawInfoConsent	Until the end of the browser session	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Until the end of the browser session	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Until the end of the browser session	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Until the end of the browser session	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Secarcam's Computer Science Web

Positioning of elements

Positioning of elements

Model block

Flexible model

Direction of the elements

Fit in the main shaft

Alignment of the content

Fit on the secondary axis

Properties of the elements

Model grid

Media Queries

Importing style sheets

Rules @media

Adaptive layout with Media Queries

Adaptive layout with the flexible model

Adaptive design with the model grid

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Positioning of elements

Model block

Flexible model

Direction of the elements

Fit in the main shaft

Alignment of the content

Fit on the secondary axis

Properties of the elements

Model grid

Media Queries

Importing style sheets

Rules @media

Adaptive layout with Media Queries

Adaptive layout with the flexible model

Adaptive design with the model grid

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Cookie policy