Adequando o Design da Página de Produtos

Olá Luis Gustavo, poderia especificar qual botão?

Perdão na verdade não é botão, é o conjunto [ cabelo + imagem + textos ]

Pelo fórum não tem como colocar uma imagem?

Luis Gustavo, o conjunto [cabelo+imagem+texto] normalmente chamamos de card.

Em relação à imagem, eu faço o seguinte, capturo a tela e subo no IMGUR

Depois envio o link por aqui, como no exemplo abaixo:

https://imgur.com/a/ndwvW0a

Gostaria de colocar o card quando na exibição do celular ocupando 100% da largura da tela.

https://imgur.com/a/Qg0yhdv

Poderia colar seu codigo CSS?

body {
    font-family: 'Montserrat', sans-serif;
}

header {
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover {
    color: #C78C19;
    text-decoration: underline;
}

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.produtos li:hover {
    border-color: #C78C19;
}

.produtos li:active {
    border-color: #088C19;    
}

.produtos li:hover h2 {
    font-size: 34px;
}

.produtos h2 {
    font-size: 30px;
    font-weight: bold;
}

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

footer {
    text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
}

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin: 20px 0 0;
}

form {
    margin: 40px 0;
}

form label, form legend {
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padrao {
    display: block;
    margin: 0 0 10px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

.enviar {
    width: 40%;
    background-color:orange;
    font-weight: bold;
    font-size: 18px;
    color: white;
    padding: 15px 0;
    border: none;
    border-radius: 5px;
}

.enviar:hover {
    background-color: darkorange;
    transition: 1s;
    transform: scale(1.2);
}

table {
    margin: 20px 0 40px;
}

thead {
    background-color: #555555;
    font-weight: bold;
    color: white;
}

td, th {
    border: 1px solid #000000;
    padding: 8px 15px;
}

/*css da página inicial*/

.banner {
    width: 100%;
}
.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    clear: left;
}

.titulo-principal::first-letter {
    font-weight: bold;
}

.titulo-principal::before {
    content: "[";
}

.titulo-principal::after {
    content: "]";
}

p::first-line {
    font-style: italic;
}

.principal p {
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 20px 0;
}

.imagembeneficios {
    width: 60%;
}

.mapa {
    padding: 3em 0;
    background: linear-gradient(#FEFEFE, #888888)
}

.mapa-conteudo {
    width: 940px;
    margin: 0 auto;
}

.mapa p {
    margin: 0 0 2em;
    text-align: center;
}

.video {
    width: 560px;
    margin: 2em auto;
}

.conteudo-beneficios {
    width: 640px;
    margin: 0 auto;
}

.lista-beneficios {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.beneficios {
    padding: 3em 0;
    background-color: #888888;
}

.itens {
    line-height: 1.5;
}

.itens:first-child {
    font-weight: bold;
}

.itens::before {
    content: "⚝ ";
}

.principal {
    padding: 3em 0;
    background-color: #FEFEFE;
    width: 940px;
    margin: 0 auto;
}

Claro, me perdoe a desorganização.

Bom dia Luis Gustavo,

Para aplicar isso você precisará aplicar responsividade na tua pagina. Assim ela se adaptará para diferentes tamanhos de tela, apresentando as informações de acordo com isso.

Acredito que alguns cursos à frente você poderá ampliar esse entendimento.

Recomento dar uma olhada nestes links:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Abraço,

Carlos Ruesta