Código para Mobile

Front-end CSS
#1

Olá,

Sou novo aqui no fórum e na área de programação também. Estou criando um site como exercício de HTML e CSS e ele precisa ser responsivo. Porém estou com dificuldade para adapta-lo em dispositivos móveis.

A Tag que estou usando no arquivo index.html é essa:

e no arquivo css estou usando as seguintes configurações:
@media (max-width: 939px){
.container {
width: 96%;
}

	header h1{
		text-align: center;
	}

	header h1 img{
		max-width: 50%;
	}

	.sacola{
		display: none;
	}

	.menu-opcoes{
		position: static;
		text-align: center;
	}

	.menu-opcoes ul li{
		display: inline-block;
		margin: 5px;
	}

	.busca,
	.menu-departamentos,
	.banner-destaque img{
		margin-right: 0;
		width: 100%;
	}

	.painel{
		width: auto;
	}

	.painel li{
		width: 30%;
	}

	.painel img{
		width: 100%;
	}
}

Se alguém puder me dar um help, tenho pesquisado mas não encontrei nada que me ajude a resolver.

Grato

#2

sim amigo qual seria sua dúvida ?

/ * Dispositivos pequenos demais (telefones, 600px e menos) * /
@media only screen and (max-width: 600px) {…}

/ * Dispositivos médios (tablets paisagem, 768px e superior) * /
@media only screen and (min-width: 768px) {…}

/ * Dispositivos grandes (laptops/desktops, 992px e superior) */
@media only screen and (min-width: 992px) {…}

/ * Dispositivos grandes (laptops / desktops, 992px e superior) * /
@media only screen and (min-width: 1200px) {…}

basta utilizar essas media queris especificas para cada tamanho de dispositivo