Problème dimension boutons

Bonjour, je cherche à réduire la taille de mes boutons en fonction de la résolution de l'écran. Autrement dis, plus la largeur de l'écran est réduite, plus les bouton rapetissent Un pourcentage me paraissait assez simple a appliquer ici mais cela me crée des duplicatas de mes boutons sur toute la largeur de la page ... Auriez vous une alternative simple à mon problème ? Voici mon portfolio

>> http://www.jonathan-claudin.fr/

Ma volonté est de créer une version responsive de celui ci, ce qui est en grande partie le cas . Les boutons me posent problèmes car ils sont trop gros pour une taille écran mobile. J'ai essayé avec des media queries auparavant mais rien y fait.

Les deux boutons qui me posent problèmes sont les boutons "Embauchez-Moi" et le bouton de contact " jonathanclaudin@gmail.com" vers le bas du site.

Merci par avance. Jonathan C.

Bonjour,

Ils y aurait bien des points importants à traiter en sus de votre demande : les boutons sont de simples images sans texte (donc non accessibles). D'une manière générale les items (y comprit celui d'auto évaluation) sont des images (donc non référencable)... il faudrait au moins des alt et title significatifs. Une barre de défilement horizontale s'installe en petite et moyenne résolution...

Maintenant concentrons nous sur votre demande. L'image est appliquée à la fois à l'élément "#hire-btn" et à son enfant "#hire-btn a" et aussi sur ce même item en :focus :hover et :active (attention il y a beaucoup de règles en double de ce genre comme les height et les width). Donc dans un premier temps ne cibler le background-image que pour un seul des deux élements. Enfin, pour éviter la répétition des images après un width 100% il faut mettre une déclaration background-repeat: none (par défaut c'est : background-repeat: repeat). Bien entendu, cette dernière règle ne fonctionnera pas si les points précédents n'ont pas été traités puisque le bakckground-image repeat s'appliquera encore à eux...

Il y aurait bien des choses à dire encore, mais sans tout refaire, ce que vous pourriez faire en gros :

#hire-btn
{
  // width:630px; // annulation de cette règle, l'élément block sera donc naturellement en width: 100%
  height:180px;
  
  /* max-width:100%;
  margin: 0 auto;
  display: block; */
  
  //background-image:url(img/hire-me.png); // annulation de cette règle
  display: block;
  margin: 0 auto;
  font-family: 'geared_slabregular', Verdana, Arial, sans-serif;
  text-align: center;
  display: block;
  margin: 0 auto;
  outline: 0;
  // z-index: 0;  // annulation de cette règle qui ne sert à rien...
	
}

#hire-btn a
{
    background-image: url(img/hire-me.png);
    background-repeat : none; // ajout de cette règle
    display: block;
    width: 100%;
    height: 180px;
    margin: 0 auto;
    outline: 0;
}

#hire-btn a:focus,
#hire-btn a:hover,
#hire-btn a:active
{ // ici on a factorisé les états :focus, :hover et :active au sein d'une même déclaration
    background-image: url(img/hire-me-clic.png);
    // display: block;  // annulation de cette règle qui ne sert à rien car déjà déclarée précédement
    // width: 630px;  // idem
    // height: 180px;  // idem
    // margin: 0 auto;  // idem
    // outline: 0;  // idem
}