-3
I decided to insert bootstrap, so I inserted the contents of my page inside the container class, called the bootstrap in my head and
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But it hasn’t worked yet...
1 answer
1
Marina I’m including this answer just to clarify for you how the Viewport works and why your site is probably not responsive even with the Viewport and Bootstrap.
First see how the <meta name="viewport">
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 how the elements are rendered will depend heavily on the device.
A Meta Tag Viewport
Use the meta tag viewport, introduced by Apple, and then adopted and developed by more people.
She looks like this:
<meta name="viewport" content="">
Within the content="" you can enter a series of comma-separated values, but let’s focus on the fundamentals now.
For example, if your mobile layout is set to 320px, you can specify the viewport that 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 must type:
<meta name="viewport" content="width=device-width">
To make sure 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 be displayed correctly in 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 in. They are able to read everything as best as possible?
Another option is to set up Viewport directly by CSS, including this is Microsoft’s recommendation for Internet Explorer (ie10 and higher)
@viewport{
zoom: 1.0;
width: device-width;
}
Here are two excellent articles in Portuguese that served as a reference and will help you a lot!
https://tableless.com.br/manipulando-metatag-viewport/
Now why your site even with Bootstrap is not responsive.
From what you said very probably you are not using the system of Grid bootstrap. Only index bootstrap to <head> of the site does not help. You have to use the Classes of Grid System for content to be responsive.
Here’s an example of how HTML looks using Grid Classes of Bootstrap, and below an image that corresponds to that code
<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>
Note that the Bootstrap Original Grid Classes is that they are responsible for leaving the content that is within the <div> responsive and adaptable on the screens
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
Article in Portuguese para você entender melhor o Sistema de Grid e as Classes que precisa usar
https://edsonjunior.com/compreendendo-grid-do-bootstrap/
Here is the official Bootstrap 3 Grid system documentation
https://getbootstrap.com/docs/3.3/css/#grid
Bootstrap 4 Grid Documentation
Browser other questions tagged bootstrap responsive
You are not signed in. Login or sign up in order to post.
Post the full form you created, there’s little information for anyone to help you.
– Jonathas B. C.
Welcome, Marina. Start by doing the Tour to learn how the community. So we can help you, edit your question and provide us with a MCVE because only with the code you put in, you can’t identify where the problem.
– NoobSaibot