Problem in fixed layout creation

Question

Guys, I’m having trouble creating a layout fixed that only adapts to the height or width of the screen, whether mobile or desktop. But it is not a responsive site, it is a normal site for desktop, not for the version mobile, but when I open here on my mobile is a few parts outside the layout or below the rodape, I can’t find where I’m going wrong.

This is the site:

http://www.iracemafilha.com.br

I think the problem is in the configuration of the body or div "everything" or even in some div that is passing the screen and so is great and not adapting.

Here’s the site in the repository, if anyone wants to take a look at what’s going on.

https://github.com/isckosta/IracemaFilhaV2.git

Answer 1

Dude, I got a look at the super fast code, the layout’s a little weird. But it’s easy to solve works with wrapper (100%) set with container-Fixed within each sections with resolution size you want to meet ex: 960px.

The right thing would be to work with relative measures and creating breakpoints with mediaqueries. But the start within what you want is this.

Take a look at the basics so you have an idea: http://codepen.io/carlos-jcdesign/pen/RPyeoZ

Answer 2

One strategy you can use in this case is to dynamically fix the height and width of the page so that they are always equal to the height and width of the device’s screen, respectively.

To do this, place the following code inside the block <script type="text/javascript"> in the archive index php.:

var corrigirTamanhoDaPagina = function() {
    // Ajusta a largura da página para ficar igual à largura 
    // da tela do dispositivo (celular, tablet ou pc).
    $("body").css("width", $(document).width() + "px");

    // Ajusta a altura da página para ficar igual à altura da tela do dispositivo.
    $("#div-content").css("height", $(document).height() + "px");
};

// Irá corrigir o tamanho da página assim que ela for carregada.
$(document).ready(function() {
    corrigirTamanhoDaPagina();
});

// Faz com que o tamanho da página seja corrigido sempre que a tela mudar de tamanho, 
// por exemplo quando o celular muda do modo paisagem para retrato e vice versa.
$(window).resize(function() {
    corrigirTamanhoDaPagina(); 
});