Is there any way to self-adjusting the site for mobile phones?

Asked

Viewed 123 times

-2

I am doing a mini-project where on PC the same does not present problems in the page preview. But when I test on the cell phone the thing changes a little figure, see the print of the two tests please:

Print 1

Print 2

In the first part of the panel is occupying the footer, my code is basically this:

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

In the second the site is all deformed, to the point that certain objects disappear from the page. Is there an adjustment or script that I can use to get around this problem? Thanks in advance.

css bootstrap

  • The site should be responsive, or using some library that assists such as bootstrap, or by code, such as medias queries

  • Hey Lucas, I’m wearing the bootstrap.

  • Boostrap has the grid system and the mobile first concept, which is basically to develop first thinking about the mobile, for then dektop.

2 answers

2


There is, you can even use some framework example: Bootstrap. I’ll leave an example below if you do not want to use any framework and do everything in '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.

  • Thank you, you solved my problem perfectly!

1

Are you using Bootstrap? Ok, great! , now check the grids option it provides, if you use it will adjust as selected.

For example, in a div, which you would like on desktop to be 50%, you can use the col-lg-6 class. If you would like in mobile or other resolutions this div is 100%, can include the class col-Xs-12, getting so:

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

You can check this information on the following link: http://getbootstrap.com/css/#Responsive-Utilities

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

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

Browser other questions tagged css bootstrap

You are not signed in. Login or sign up in order to post.