Is there any way to auto-tune the mobile site? [closed]

-2

I'm doing a mini-project where on PC it does not present problems in page view. But when I test the cell phone thing changes a bit, see the print of the two tests please:

Inthefirstpartofthepanelisoccupyingthefooter,mycodeisbasicallythis:

<divclass="panel panel-default">
<div class="panel-body">
Conteúdo aqui.
</div></div>

In the second, the site gets all deformed, so that certain objects disappear from the page. Is there any adjustment or script I can use to work around this problem? Thank you in advance.

    
asked by anonymous 13.06.2017 / 16:18

2 answers

2

There is yes, you can even use some example framework: Bootstrap. I will leave an example below if you do not want to use any framework and do everything in the 'hand':

/* Small devices ( @screen-sm-min Phones (<768px) ) */
@media (min-width: 368px) {

}

/* Small devices (@screen-sm-min tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices ( @screen-md-min desktops, 992px and up) */
@media (min-width: 992px) { 

}

/* Large devices ( @screen-lg-min large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

Now within each @media you can change your containers, elements, etc ... according to the resolution.

    
13.06.2017 / 16:21
1

Are you using Bootstrap? Okay, great !, Now check the grids option it provides, if you use it it will fit as selected.

Example, in a div that you would like the desktop to be 50%, you can use the col-lg-6 class. If you would like in mobile or other resolutions that div is 100%, you can include the col-xs-12 class, thus:

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>

You can check this information at the following link: link

Remembering that you can also use @media to adjust to the desired screen resolution:

@media screen and (min-width: 1px) and (max-width: 500px){}
    
13.06.2017 / 16:32