I need to keep a 1920 x 1080 resolution of this website in all browsers and devices

Question

I want to make this website responsive in all of the browsers and devices it is being retrieved. Please make sure to allow the ActiveX content when opening it. The website is free of virus.

@import url("http://fonts.googleapis.com/css?family=Lato");

body {
background: -moz-linear-gradient(307deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(105,250,255,1)), color-stop(20%, rgba(92,232,211,1)), color-stop(50%, rgba(74,207,147,1)), color-stop(83%, rgba(18,168,153,1)), color-stop(94%, rgba(0,156,156,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(307deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(307deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* opera 11.10+ */
background: -ms-linear-gradient(307deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* ie10+ */
background: linear-gradient(143deg, rgba(105,250,255,1) 0%, rgba(92,232,211,1) 20%, rgba(74,207,147,1) 50%, rgba(18,168,153,1) 83%, rgba(0,156,156,1) 94%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69FAFF', endColorstr='#009C9C',GradientType=0 ); /* ie6-9 */
}



.Chile   {border: none; width:20%; height:30px; position:absolute; top:8px; left:25px; margin:10px; padding:10px; height: 30px;}
#chName  {position:absolute; top:17px; left:34px;} 
#chi  {position:absolute; top:15px; left:225px; width:125px; height:77px;}
.chClk  {position:absolute; top:60px; left:50px;}
    
.Peru  {border: none; width:20%; height:30px; position:absolute; top:8px; left:355px; margin:10px; padding:10px; height: 30px;}
#peName  {position:absolute; top:17px; left:362px;} 
#per  {position:absolute; top:15px; left:555px; width:125px; height:77px;}
.peClk  {position:absolute; top:60px; left:50px;}
    
.Argentina  {border: none; width:20%; height:30px; position:absolute; top:8px; left:685px; margin:10px; padding:10px; height: 30px;}
#arName  {position:absolute; top:17px; left:695px;}
#arg  {position:absolute; top:15px; left:887px; width:125px; height:77px;}
.arClk  {position:absolute; top:60px; left:50px;}
    
.Uruguay {border: none; width:20%; height:30px; position:absolute; top:8px; left:1014px; margin:10px; padding:10px; height: 30px;}
#urName  {position:absolute; top:17px; left:1025px;} 
#uru  {position:absolute; top:15px; left:1217px; width:125px; height:77px;}
.urClk  {position:absolute; top:60px; left:50px;}


    
.chBox     {background-color:#F9FAFA; width:20%; height:90%; border:2px solid #D2D9D9; position:absolute; top:175px;
    left:25px; margin:10px; text-align:left; padding:10px;}
      

<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Custom Select Menu</title>
     <link rel="stylesheet" href="css/style.css">
</head>
<body>
  
<!--  CHILE  -->

<img id="chName" src="https://south-america-dashboard.000webhostapp.com/Country_names/chile.png" width="200px" height="64px"></img>
<div class="Chile">
<div class="chClk">
<iframe src="http://free.timeanddate.com/clock/i5p80il2/n232/fn5/tct/pct/ftb/th2" frameborder="0" width="94" height="19" allowTransparency="true"></iframe>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/chi.png" id="chi"></img>

 <div class="chBox">
 <div class="chAp">
 <select id="mounth">
    <option value="hide">- Aplicación -</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
    <option value="Option 4">Option 4</option>
 </select> 
 </div>
     
 <div class="chEv">
 <select id="year">
    <option value="hide">- Evento -</option>
    <option value="Event 1">Event 1</option>
    <option value="Event 2">Event 2</option>
    <option value="Event 3">Event 3</option>
    <option value="Event 4">Event 4</option>
    </select>
 </div>
 </div>

<!-- PERÚ   -->
 
<img id="peName" src="https://south-america-dashboard.000webhostapp.com/Country_names/peru.png" width="200px" height="64px"></img>
<div class="Peru">
<div class="peClk"><iframe src="http://free.timeanddate.com/clock/i5p80il2/n131/fn5/tct/pct/ftb/th2" frameborder="0" width="94" height="19" allowTransparency="true"></iframe>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/per.png" id="per"></img>


<!-- ARGENTINA   -->
 
<img id="arName" src="https://south-america-dashboard.000webhostapp.com/Country_names/argentina.png" width="200px" height="64px"></img>
<div class="Argentina">
<div class="arClk"><iframe src="http://free.timeanddate.com/clock/i5p80il2/n51/fn5/tct/pct/ftb/th2" frameborder="0" width="94" height="19" allowTransparency="true"></iframe>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/arg.png" id="arg"></img>


<!-- URUGUAY   -->
 
<img id="urName" src="https://south-america-dashboard.000webhostapp.com/Country_names/uruguay.png" width="200px" height="64px"></img>
<div class="Uruguay">
<div class="urClk"><iframe src="http://free.timeanddate.com/clock/i5p80il2/n163/fn5/tct/pct/ftb/th2" frameborder="0" width="94" height="19" allowTransparency="true"></iframe>
</div>
</div>
<img src="https://south-america-dashboard.000webhostapp.com/Flags/uru.png" id="uru"></img>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src="js/index.js"></script>

</body>

</html>

    </div>
    </div>
    <img src="https://south-america-dashboard.000webhostapp.com/Flags/uru.png" id="uru"></img>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script src="js/index.js"></script>

    </body>

    </html>

<!-- end snippet -->

Simply change all your fixed sizes and positions to scaleable one's, like percent, viewport units. — Asons, Jun 16 '17 at 06:21
If that is what you ask, then you came to the wrong place. SO is not a code writing service, find yourself a web development company and they will be glad to do that — Asons, Jun 16 '17 at 06:25
I started to learn a couple of months ago and I still can't figure out how to do it. I'd like some help please. — T100, Jun 16 '17 at 06:26
Just search the internet using _create responsive web site_ and you'll fin many tutorials etc. Read and learn, make an effort of your own and come back with what is not working — Asons, Jun 16 '17 at 06:29
Also, the first sentence in your question is in direct conflict with the title, so it's not even clear what you need to achieve to begin with. — Mr Lister, Jun 16 '17 at 07:32

score 0 · Answer 1 · answered Jun 16 '17 at 07:41

0

First thing you might want to look into viewport meta tag. Also you might need CSS media rules. Other than that tweak your main containers, scale your element containers to the approprite size and so on.

answered Jun 16 '17 at 07:41

amberbrew

17
1
5

Thank you. I will look for information about the viewport meta tag and will come back if further issues arise. Have a great day! ☺ – T100 Jun 16 '17 at 13:59

score 0 · Answer 2 · answered Jun 20 '17 at 09:49

For make all responsive at 100% I suggest to edit the styles like:

#uru        {position:absolute; top:15px; left:1217px; width:125px; height:77px;}

This is a very static code, maybe you need a cointainer with width 100% and try to use less possible the position:absolute.

Good luck!

I need to keep a 1920 x 1080 resolution of this website in all browsers and devices

2 Answers2