page web sur différents écrans

Question

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

Sur mon ordinateur le "See More" texte 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 de cette manière (non je veux):

IMAGE SECOND:

dans cette SEC OND IMAGE, le texte "See More" n'est pas sur une seule ligne pour certaines raisons (sur un écran différent) ce que je ne veux pas.

Note: J'ai marqué le texte "Voir plus" avec un stylo pour qu'il soit facile pour les lecteurs de chercher le texte.

Les codes CSS que j'utilise le « Afficher plus » texte sont:

.development-text .right-side-bottom { 
    padding-left: 220px; 
    padding-right: 0px !important; 
    font-style: italic; 
} 

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

Dans cette classe .development-text .right-side-bottom supprimez padding-left: 220px; et ajoutez text-align: right; .Ces changements sont nécessaires.

.development-text .right-side-bottom { 
    font-style: italic; 
    padding-right: 0 !important; 
    text-align: right; 
} 

Answer 2

Pour votre problème, cela devrait résoudre:

.development-text .right-side-bottom { 
    text-align: right; 
    padding-right: 0px !important; 
    font-style: italic; 
} 

Et pourtant, ce n'est un petit problème par rapport à l'ensemble des problèmes que vous rencontrerez dans le processus de codage d'un réactif page. Je vous recommande vraiment de suivre un cours en design responsive, tel que Learn Responsive Design