Doubt with CSS and screen margins

Question

Doubt with CSS and screen margins

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a js file that I load on each project page and that analyzes the resolution of the screen.

if ($(window).width() > 1024) {
//Aqui cargara una hoja de estilos para resoluciones mayores a 1024
document.write('<link rel="stylesheet" type="text/css" href="../css/mayor1024.css">');
} else if ($(window).width() == 1024) {
//Aqui cargara una hoja de estilos para resoluciones de 1024
document.write('<link rel="stylesheet" type="text/css" href="../css/menor1024.css">');
}  else if ($(window).width() < 1024) {
//Aqui cargara una hoja de estilos para resoluciones menores de 1024
document.write('<link rel="stylesheet" type="text/css" href="../css/menor1024.css">');
}

I have two css files where in the minor1024.css I have the following:

#bloque {
padding-left: 0%;
padding-right: 0%;
}

#formulario {
padding-left: 0%;
padding-right: 0%;
}

and in the mayor1024.css I have this:

#bloque {
padding-left: 5%;
padding-right: 5%;
}

#formulario {
padding-left: 20%;
padding-right: 20%;
}

For example, on the NEWS page, load a table inside a div with this definition:

<div id="bloque" class="ui text container">
    (va la tabla)
</div>

later when one chooses a given news, it fills up on the screen inside a div with this structure:

<div id="formulario" class="ui text container">
    (va el desarrollo de la noticia)
</div>

This I did because on the screen so that the news did not occupy the full width of the screen (and it made reading difficult) I put a padding on the sides of 20% of the screen.
Now, when I went to a mobile device, anything happened, it looked horrible.
In this way, if the device is mobile, it takes the width of the screen and it should look good.
But the problem I have is that in the mobile I still have a margin on the sides and it does not take me the full width of the screen ... what should this problem be?

javascript html5 css3

asked by MNibor 14.08.2017 в 19:40

source

2 answers

0

I found a solution that works well. With this solution I do not analyze the resolution of the screen but I get the width of the browser

if ($(window.innerWidth() > 1024) {
//Aqui cargara una hoja de estilos para resoluciones mayores a 1024
document.write('<link rel="stylesheet" type="text/css" href="../css/mayor1024.css">');
} else if ($(window.innerWidth() == 1024) {
//Aqui cargara una hoja de estilos para resoluciones de 1024
document.write('<link rel="stylesheet" type="text/css" href="../css/menor1024.css">');
}  else if ($(window.innerWidth() < 1024) {
//Aqui cargara una hoja de estilos para resoluciones menores de 1024
document.write('<link rel="stylesheet" type="text/css" href="../css/menor1024.css">');
}

I use the same routine in js that I have defined but change $ (window) .width () to $ (window.innerWidth ()
the solution is perfect ...

answered by 14.08.2017 в 20:19

Problem with the use of variables Repeat a loop

score 1 · Accepted Answer

Try something like this, first detect if you are connecting from a mobile device if you load the minor style1024.css and otherwise load the style according to the screen resolution.

<script type="text/javascript"> 

  var device = navigator.userAgent

  if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)|| device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|iPad|iPod/i)|| device.match(/Opera Mini/i)|| device.match(/IEMobile/i)|| device.match(/Mobile/i)|| device.match(/Windows Phone/i)|| device.match(/windows mobile/i)|| device.match(/windows ce/i)|| device.match(/webOS/i)|| device.match(/palm/i)|| device.match(/bada/i)|| device.match(/series60/i)|| device.match(/nokia/i)|| device.match(/symbian/i)|| device.match(/HTC/i)) { 
    document.write('<link rel="stylesheet" type="text/css" href="../css/menor1024.css">');
  } else {
    if ($(window).width() > 1024) {
    //Aqui cargara una hoja de estilos para resoluciones mayores a 1024
    document.write('<link rel="stylesheet" type="text/css" href="../css/mayor1024.css">');
    } else if ($(window).width() == 1024) {
    //Aqui cargara una hoja de estilos para resoluciones de 1024
    document.write('<link rel="stylesheet" type="text/css" href="../css/menor1024.css">');
    }  else if ($(window).width() < 1024) {
    //Aqui cargara una hoja de estilos para resoluciones menores de 1024
    document.write('<link rel="stylesheet" type="text/css" href="../css/menor1024.css">');
    }
  } 

</script>

Detect mobile version and redirect web or link with JavaScript

I do not know if this is the ideal, I would recommend to see if it would be convenient to use a Bootstrap framework that helps a lot during these hours and it is not difficult to learn how to use:

Bootstrap (framework)

Bootstrap