Build a responsive modal screen

Question

Build a responsive modal screen

Navigation

#1 by (1 votes)

0

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 "> 


  </div>

css asp.net

asked by Efrain Mejias C 12.08.2016 в 14:49

source

1 answer

CreateView does not save in the database with save () LEMP Script for Ubuntu / Debian

score 1 · Accepted 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