Tenho um site que estou fazendo utilizando Bootstrap.
Nele eu tenho uma parte que consiste em alguns ícones grandes distribuídos assim:
Em resoluções maiores, a distribuição ficará assim.. 2 linhas com 3 ícones cada.. e depois vai se ajustando por causa do Bootstrap.
Quando clicamos em cada ícone, surge embaixo um bloco com textos e conteúdos a parte... Exemplo:
Porém.. isso está me quebrando a cabeça. Não consegui deixar de um jeito prático...
Como cada ícone está dentro de uma div "col-", eu deixei o conteúdo oculto de cada ícone também dentro da mesma div.. e por jQuery, quando clica, ele mostra a div oculta.. Porém é que esse conteúdo oculto está sendo limitado ao tamanho da div pai ('col-'), e é preciso que ocupe a largura toda da janela.. como na imagem de exemplo....
Dai fiz uma gambiarra por jQuery, porém outro problema... que é a margin da div.. ela não fica grudada no canto esquerdo da tela.. precisaria criar algum jeito de auto calcular essa distância e depois aplicar a div oculta na hora dela aparecer....
Ai ai..
Alguém teria uma sugestão/ideia de como fazer?