Problem with responsive div with 1920px resolution

Asked

Viewed 123 times

-1

The resolution of my pc and 920px , my code is all right, more when I see it in the resolution 1920px it looks as if the div had left the screen.

920px resolution:

inserir a descrição da imagem aqui

1920px resolution: inserir a descrição da imagem aqui

HTML:

<div class="container" ng-controller="NavPJController">
    <div class="row" id="menuEmpresa" ng-show="menuEmpresa">
        <div class="col-xs-4 col-sm-6" ng-init="encontrarPessoasRelacionadas()">
            <div>
                <a ng-click="pessoaRelacionada = true; empresaRelacionada = false; temaRelacionado = false; moduloRelacionado = false;">
                    <span class="glyphicon glyphicon-user" id="icons"></span>
                </a>
                <a ng-click="pessoaRelacionada = false; empresaRelacionada = true; temaRelacionado = false; moduloRelacionado = false;">
                    <span class="glyphicon glyphicon-home" id="icons"></span>
                </a>
                <a ng-click="pessoaRelacionada = false; empresaRelacionada = false; temaRelacionado = false; moduloRelacionado = true;">
                    <span class="glyphicon glyphicon-thumbs-up" id="icons"></span>
                </a>
                <a ng-click="pessoaRelacionada = false; empresaRelacionada = false; temaRelacionado = true; moduloRelacionado = false;">
                    <span class="glyphicon glyphicon-book" id="icons"></span>
                </a>

                <div id="verPessoa" ng-show="pessoaRelacionada">
                    <div ng-repeat="dados in pessoasRelacionadas">
                        <div ng-repeat="pessoas in dados">
                            <a href="">{{pessoas.canal}}</a>
                        </div>
                    </div>
                </div>
                <div ng-show="empresaRelacionada">Empresa</div>
                <div ng-show="moduloRelacionado">Modulo</div>
                <div ng-show="temaRelacionado">Tema</div>


            </div>
        </div>
        <div class="col-xs-8 col-sm-6" id="menuEmpresa2">
            <div>
                <img id="fotoPerfil" src="images/Skyrim-logo-dragon.jpg" class="img-circle" title="Ryzzan">
                <h1>#Ryzzan</h1>
                <div id="perfilMenu">
                    <a href=""><span class="glyphicon glyphicon-user" id="perfilIcons" title="Ver Perfil"></span></a>
                    <a href=""><span class="glyphicon glyphicon-asterisk" id="perfilIcons" title=""></span></a>
                    <a href=""><span class="glyphicon glyphicon-comment" id="perfilIcons" title="Bate Papo"></span></a>                 
                </div>  
            </div>
        </div>
    </div>
</div>

css:

#menuEmpresa {
position: absolute;
margin-top: -20px;
background-color: #f5f5f5;
width: 80%;
min-height: 400px;

}

  • Try to adjust the Padding in the main container, please test

2 answers

-1

try it :

#menuEmpresa {
position: absolute;
margin-top: -20px;
background-color: #f5f5f5;
**width: 100%;**
min-height: 400px;

If it doesn’t work answer me here that I have other tests. but probably this is it

  • looked the same and screen 1920px

-1

Try it like this:

#menuEmpresa {
position: absolute;
margin-top: -20px;
background-color: #f5f5f5;
**width: 100%;**
min-height: 400px;
margin: 0 auto;
}

If not, try this:

#menuEmpresa {
margin-top: -20px;
background-color: #f5f5f5;
**width: 100%;**
min-height: 400px;
margin: 0 auto;
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.