Imagem e tabela em site responsivo

Filipe_O

Power Member
Boas pessoal!

Estou a desenvolver um site responsivo em ASP.NET que apresenta uma imagem com uma tabela ao lado.
A minha intenção é que se a tela diminuir, a tabela passe para "baixo" do ecrã.
Já o consegui, mas ainda não da forma desejada.
Passo a exemplificar.
Esta é a pagina em landscape:
Sem_t_tuslo.png


Quando reduzo a largura da página acontece-me isto:
Sem_t_tulo.png


De facto eu quero que a tabela passe para baixo quando o tamanho da página é menor, mas gostaria que a imagem reduzi-se de tamanho (com a redução de tela), a fim da tabela caber ao lado, até a imagem ter X pixeis.
Compreendem?

CSS:
Código:
.wrapper {
    overflow: hidden;
}
.wrapper div {
    display:table;
height: 100%;
}
.itemwrapper {
    background-color: gray;
    float: left;
    margin-right: 40px;
}
.quadro {
    overflow: hidden;
    margin-top:180px;
    min-height: 130px;
}
@media screen and (max-width: 700px) {
    .itemwrapper {
        float: none;
        margin-right: 0;
        margin-left: 30px;
        margin-top: 40px;
        width: auto;
        border: 0;
        border-bottom: 2px solid #000;
    }
}

ASP:
Código:
<div class="wrapper">
            <div class="itemwrapper "><img src="Content/logo.jpg" class="img-responsive"  />
            </div>
            <div class="quadro"></div>
</div>

Antes de mais, muito obrigado!
 
Última edição:
Back
Topo