Alterações CSS para Mobile

De acordo com o manual "Editor CSS: Como utilizar", ou até "Como ocultar um item por Editor CSS" e "Alterando a cor de um elemento por Editor CSS" as edições que você realiza em seu site via CSS parecem relativamente simples e fácil de entender quando se trata de alterações mais básicas.

Então se você ainda não leu esses 3 manuais acima é recomendável que leia para entender melhor os passos desse ok?

Mas essas instruções focam nas alterações para Desktop. E como fica para Mobile?

Muitas alterações realizadas para Desktop não afetam a versão Mobile de seu site, por isso muitas vezes é necessário "transformar" o modo de inspeção para o formato device, e é nesse manual que você irá aprender como faz isso.

Vamos lá!

1. O primeiro passo é como se fosse alguma alteração para Desktop. Aperte o botão direito do mouse e selecione a opção "Inspecionar" (ou diretamente Ctrl+Shift+I)

2. Feito isso irá aparecer uma tela como essa:

Agora selecione a opção "Toggle device toobar" (ou Ctrl+Shift+M):

3. Estamos quase lá, agora para melhorar a simulação da exibição mobile você pode mover essa barra inferior para uma das laterais;

Basta selecionar a opção Customize and control DevTools:

E definir no menu "Dock side" se irá exibir na lateral direita ou esquerda, selecione o que preferir:

Nesse caso vou optar para a exibição no canto direito.

4. Agora no menu superior você deve achar a opção "Application" e selecioná-la:

E selecione a opção "Clear site data":

5. Agora o último passo é só atualizar a página com um Ctrl+F5 ou diretamente no ícone

Pronto! Agora você está simulando uma exibição em mobile e pode inspecionar e editar os elementos na mesma dinâmica de desktop: