I created a nonresponsive form. How do I make you responsive?

Question

I created a nonresponsive form. How do I make you responsive?

Navigation

#1 by (1 votes)

-4

I decided to insert bootstrap, then I inserted the contents of my page into the container class, called the bootstrap on my head and

<meta name="viewport" content="width=device-width, initial-scale=1.0">

But it still has not worked ...

bootstrap responsivo

asked by anonymous 30.12.2017 / 00:26

1 answer

Cryptotomes: what is the difference between SEED, Private / Public Keys and Address? [closed] When you click on a link, close all open divs and open a specific one? [duplicate]

score 1 · Answer 1

Marina is including this answer just to clarify for you how ViewPort works and why your site is probably not responsive even with ViewPort and Bootstrap

First see how <meta name="viewport"> works

The viewport is the area where your website appears. It is the white area of the window when you open the browser. The viewport will always be the size of the window. But the way the elements are rendered will depend a lot on the device.

Meta Tag Viewport

Use the meta tag viewport, introduced by Apple, and then adopted and developed by more people.

It looks like this:

<meta name="viewport" content="">

Inside the content="" you can enter a series of comma-separated values, but let's focus on the basics right now.

For example, if your mobile layout is set to 320px, you can specify the viewport in this way:

<meta name="viewport" content="width=320">

For flexible layouts it is more practical to base the width of your viewport on the device in question, to match the width of the layout to the width of the device you should type:

<meta name="viewport" content="width=device-width">

To make sure that your layout will be shown as you planned, you can set the initial zoom level. This, for example:

<meta name="viewport" content="initial-scale=1">

... will ensure that, after opening, the layout will display correctly in a 1: 1 scale. No zoom will be applied. You can go further and avoid any zoom by the user:

<meta name="viewport" content="maximum-scale=1">

Note: Before applying the maximum-scale parameter, consider whether you really should be preventing users from zooming. Are they able to read everything in the best way possible?

Another option is to configure ViewPort directly through CSS, including this is Microsoft's recommendation for Internet Explorer (ie10 and above)

@viewport{
    zoom: 1.0;
    width: device-width;
}

Here are two great articles in Portuguese that have served as a reference and will help you a lot!

link

Now why your site even with Bootstrap is not responsive.

From what you've said, you're probably not using Bootstrap's Grid system. Only crawling Bootstrap on the <head> of the site does not work. You have to use Grid System Classes for content to be responsive.

Here's an example of how HTML is using Bootstrap's Grid Classes , and below an image that matches that

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      ...conteúdo da coluna 1...
    </div>
    <div class="col-md-3">
      ...conteúdo da coluna 2...
    </div>
    <div class="col-md-3">
      ...conteúdo da coluna 3...
    </div>
    <div class="col-md-3">
      ...conteúdo da coluna 4...
    </div>
  </div>
</div>

NoticethatBootstrapGridOriginalClassesareresponsibleforleavingthecontentwithinthe%responsiveandadaptive%onthescreens

<divclass="container-fluid">
<div class="row">
<div class="col-md-3">

link

Here is the official Bootstrap 3 Grid system documentation

link

Bootstrap 4 Grid Documentation

link