Faire la page Web semble même sur différents écrans

Question

J'ai un webpage fait par moi. En ce moment, sur différents écrans, c'est très différent.

Sur mon ordinateur le texte « Sales » est à la recherche comme celui-ci (qui est je veux):

IMAGE PREMIER:

Alors que sur un autre ordinateur (avec une taille d'écran différente), la recherche dans ce façon (ce qui est je veux):

IMAGE SECOND:

Dans cette seconde image, le texte de vente va bien parti pour quelques REAS ons (sur un écran différent) ce que je ne veux pas. Je veux que ce soit sur l'image du haut des mains tel que représenté dans la PREMIÈRE IMAGE.

Les codes CSS que j'utilise pour le texte de vente sont les suivants:

.sales .text1 { 
    padding-left: 450px; 
    color: #0275d8; 
    font-size: 1.3rem; 
    font-weight: bold; 
    font-style: italic; 
    padding-bottom: 20px; 
} 

Je me demande quels sont les changements que je dois faire en CSS pour que son look même sur les différents ordinateurs de la taille de l'écran.

Answer 1

Vous devez utiliser des mesures relatives comme pourcentage, etc. pour éviter cela, plus vous pouvez utiliser des requêtes des médias pour avoir un comportement différent en fonction de nombreux facteurs comme la largeur de l'écran

Answer 2

question Impressionnant, vous voulez faire de votre page web réactif . vérifier ce lien, je crois qu'il a exactement ce que vous cherchez. https://www.w3schools.com/css/css_rwd_intro.asp

Answer 3

Dans votre CSS, j'ai changé padding-left: 450px-0 valeur ajoutée et text-align: right afin que See More lien ne sera pas coupée.

.sales .text1 { 
    padding-left: 0; 
    color: #0275d8; 
    font-size: 1.3rem; 
    font-weight: bold; 
    font-style: italic; 
    padding-bottom: 20px; 
    text-align: right; 
}