Aula 4 , atividade 3 Customizando o header. Problemas com classes de Colunas.

Boa noite Cristiano,

Dependendo da resolução que vc está vendo o projeto. Você pode utilizar a col-lg (para resoluções de 1200px ou maiores ) e col-xs (para resoluções mobile , a baixo de 768px)...

Lembrando que o boostrap utiliza 12 colunas (col), no caso vc está usando col-lg-3, ou seja, ele vai ficar no cantando com 3 colunas, mas se vc quer que ele fique full, coloque col-lg-12

Da mesma forma para o col-xs-12 (ele vai ficar full no mobile)

Para o seu problema utilize esse código e observe o resulta, se é o esperado.

<div class="col-xs-12 col-lg-9">
    conteúdo
</div>
<div class="col-xs-12 col-lg-3">
    <div style="margin-top: 60px;">
            <?php 
                    /** 
                         * DISPLAY THE PAGE TOP (AFTER HEADER) WIDGET AREA */
                    get_sidebar( 'pagetop' );
            ?>
    </div>
</div>

Bom dia Valter, então cara eu utilizei exatamente o que é pedido no curso , formando as 12 colunas somadas no col-lg , porém ao utilizar da forma como consta no curso, ele dá aquele espaçamento enorme como na imagem e ao retirar essa classe ele se encaixa perfeitamente sem espaçamento.

Cristiano,

Sem o restante do código fica difícil analisar, mas estava vendo a aula novamente e verifiquei que ele está usando "col-md". Analisa as linhas para ver se não ficou nem uma tag sem fechamento e substitui col-lg por col-md e ver o resultado (pois se vc não estiver com um tela com a resolução que chegue ao col-lg, vc verá quebrado mesmo essa parte)

<div class="col-xs-12 col-md-9">

</div>
<div class="col-xs-12 col-md-3">

</div>

Opa valter, cara substitui pelo col-md , mas continuou o espaçamento, segue o código.

<div class="container">
                <?php //if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
                <div class="site-branding-text col-xs-12 col-md-9">
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' )?></a></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>

        <div class="col-xs-12 col-md-3">
            <div style="margin-top: 60px;">
                <?php 
                    /** 
                     * DISPLAY THE PAGE TOP (AFTER HEADER) WIDGET AREA
                     */
                    get_sidebar( 'pagetop' );
                ?>
        </div>
    </div>    
</div>

Segue imagem , repare na barra de rolamento horizontal a baixo... https://uploaddeimagens.com.br/imagens/espacamento_wordpress-png

Alguém? =(