Build a responsive modal screen


I have a div tag to which I give a certain style and I show it as a modal screen, in desktop PC it looks good, but in Tablets and phones it does not appear centered..I would like to make it responsive

My Code (I do not put the buttons or labels inside the div to make it more readable, If you need to tell me and edit my question)

 <div  align="center" id ='desplegable' style="position: fixed;  width:900px; height: 480px; top: 0px; left:50px; right:0px;
      font-size: 18px; font-weight: normal; border: #333333 3px solid; background-color: #CCCCCC; color: #000000; opacity: 0.8; display:none "> 

asked by Efrain Mejias C 12.08.2016 в 14:49

1 answer


The CSS rules for that container will not work on mobile phones since you have specified the measurements in pixels. In this case, the window is 900px wide and 480px high, mobile phones and tablets usually have a lower resolution.

For this, I propose two alternatives:

  • Specify the modal window's measurements in percentages so that you can control it in screens of different resolutions.

Example in W3Schools: link

  • Use Bootstrap, a library that will help you with the interface of your website. For this case it has a component called "Modal window" that is responsive and does what you propose. It is also practical because it can be controlled with javascript.

Example in W3Schools: link

answered by 14.08.2016 / 21:41