Fixed Div when decreasing the screen

Asked

Viewed 2,156 times

2

I’m developing the following website: 

 http://173.44.46.62/~bellanap/pedidos.php

but when you lower the screen, the div where the form is breaking. It needs to be fixed. Help me?

html css layout

  • The ideal would be to use media queries to change the layout according to the screen size, but as a solution to the desktop layout you can for a body {min-width: NNNNpx} in CSS (NNNN being the minimum width you want the site to have).

1 answer

4


In order for your elements to respond to the width of the screen, you have to work with units of measurement based on it. The most practical thing for you is to work with percentages.

In this practical case, you should change the fixed pixel widths you have in the elements below to the following percentage values:

CSS

.main{
  width:50%;                          /* estava 925px */
}
.formulario{
  width:82%;                          /* estava 720px */
}
.input{
  width:100%;                         /* estava 720px */
}
.input-tel-email{
  width:46%;                          /* estava 340px */
}
textarea{
  width:100%;
}

All other declarations remain.

Upshot

Screenshot with about 800 pixels wide:

Captura de Tela com cerca de 800 pixeis de largura

  • Hi Zuul! Thank you for helping me. But I still have a question. I need the size of the . main be 70% and if I put this percentage, the layout breaks. I say this, because in mobile even without media querie should show the whole site. My viewport is at 1020px

  • @Fláviaamaral If everything has percentages, I don’t see how you can break, by setting 70% for your .main, all elements within it should shrink no problem. I was just reviewing your project and noticed that probably what you are referring to is the fact of your element .main have a margin-left:310px, which does not work when you reduce the screen for the reason explained in my reply. You should apply a percentage value as well.

Browser other questions tagged html css layout

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