Bloc div responsive

Bonjour à tous, je cherche à rendre un bloc div responsive. Plus grossièrement j'aimerais que le fameux bloc soit deux fois plus petit sur les smartphones.
J'aimerais faire rentrer ça dans un seul code et j'ai trouvé quelques infos sur @media en CSS, mais en html je sèche et comme vous l'avez deviné je suis débutant.
Merci d'avance pour votre aide

<div class="docto">
<div style="display: block; text-align: center; background-color: #2591b8; color: #ffffff; font-size: 14px; overflow: hidden; width: 220px; height: 135px; position: fixed; top: 120px; right: 8px; z-index: 10000; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px;" data-reactroot=""><span style="margin: 12px; display: block;">Prendre (bientôt) rendez-vous en ligne</span>
<a style="display: block; width: 140px; height: 40px; border-radius: 4px; background-color: #ffffff; line-height: 40px; color: #2591b8; margin: 0 auto; text-transform: uppercase; padding: 0;" href="https://www.consultoo.fr" target="_blank" rel="noopener noreferrer">Cliquez ici</a></div>
</div>

Ouh là là ! Le code est terrible. Déjà on peut factoriser des règles pour y voir plus clair. Par exemple :

border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px;

A la place :

border-radius: 4px; 

Pour la taille du bloc on peut faire avec des vh et des vw units, peut-être, ça dépend de ce que vous recherchez.

Exemple :

width: 50vw;

Modifié par Olivier C (25 Aug 2020 - 21:15)

Merci pour ces infos. En effet, il y avait quelques ligne de trop ;P
Pour le code j'ai essayé avec du vw. Au debut ça me donnait un bloc trop petit sur smartphone mais avec une indication "min-width" c'est parfait.
Merci beaucoup
Modifié par Alex24000 (26 Aug 2020 - 00:10)