Visualização no tamanho da tela

Olá, Monica.

Tudo bem?

Compartilha os seus códigos HTML e CSS por gentileza. Assim fica melhor para ajudar. Valeu.

@media only screen and (max-width: 1023px){

.menu-lateral,
.rodape,
.cabecalho,
.secao-horizontal .cartao__subtitulo,
.secao-horizontal .cartao__botao,
.secao-horizontal .cartao__player,
.secao-vertical .secao__link {
    display: none;
}

.navbar {
    display: block;
}

.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.secao-horizontal .cartao {
    column-gap: 0.5rem;
}

.secao-horizontal .cartao__imagem {
    height: 56px;
    width: 56px;
}

.secao-horizontal .cartao__titulo {
    font: 700 14px/20px Open Sans, sans-serif;
    grid-row: 1/4;
    align-self: center;
}

_______________________________________________________________________________________________________________________________________________________________


.secao{
display: grid;
align-items: center;

} .secao-horizontal{ grid-template-rows: 120px auto; } .secao-horizontal .secao__cartoes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(348px, 100%/3)), 1fr)); }

Tocados recentemente

• 

  Android Jetpack

  Hipsters Ponto Tech

  
• 

  Tipos de Cortes

  Layers Ponto Tech

  

.secao{ display: grid; align-items: center; } .secao-horizontal{ grid-template-rows: 120px auto; } .secao-horizontal .secao__cartoes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(348px, 100%/3)), 1fr)); }

<main class="principal container">
    <section class="secao secao-horizontal">
        <h2 class="secao__titulo">Tocados recentemente</h2>
        <ul class="secao__cartoes">
            <li class="cartao">
                <img class="cartao__imagem" src="./src/assets/img/hipsters-1.svg" alt="">
                <h3 class="cartao__titulo">Android Jetpack</h3>
                <h4 class="cartao__subtitulo">Hipsters Ponto Tech</h4>
                <div class="cartao__player"></div>
                <button class="cartao__botao"><img src="./src/assets/img/botao-play.png" alt=""></button>
            </li>
            <li class="cartao">
                <img class="cartao__imagem" src="./src/assets/img/layers-1.svg" alt="">
                <h3 class="cartao__titulo">Tipos de Cortes</h3>
                <h4 class="cartao__subtitulo">Layers Ponto Tech</h4>
                <div class="cartao__player"></div>
                <button class="cartao__botao"><img src="./src/assets/img/botao-play.png" alt=""></button>
            </li>