CSS défini quelque chose à aligner différemment selon l'écran résolution

Question

Voici le site que je développe ...

http://camerabeanbags.co.uk/test/

Ce répond donc si vous prenez la fenêtre du navigateur Web et de modifier la largeur que vous pouvez voir le site Web alter. Si vous regardez le bouton "Votre panier" en haut à droite de la barre verte, vous pouvez voir qu'il est aligné sur la droite. Si vous modifiez la largeur de la fenêtre du navigateur Web, elle s'aligne sur la gauche.

Comment puis-je modifier la largeur du navigateur Web avant de l'aligner sur la gauche, comme je le souhaite uniquement lorsqu'il n'y a pas d'espace pour qu'ils soient les uns à côté des autres. Comme sur un iPad il s'aligne sur la gauche mais je veux l'aligner sur la droite. J'ai essayé avec le CSS @media mais ne peux pas le comprendre pour cet élément certain.

S'il vous plaît pouvez-vous m'aider avec le CSS dont j'ai besoin, donc il aligne seulement à gauche à une certaine largeur d'écran.

Merci,

Harvey

Answer 1

Dans le CSS de votre site, une requête média est déjà en place, ce qui provoque le déplacement du chariot vers la gauche. Il ressemble à ceci:

@media (max-width: 767px) { 
    #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu { 
    float: none; 
    } 
} 

Au-dessus de 767px, le style de ces deux éléments est float: left.

Si nous supprimons cette règle, de sorte que les éléments continuent à flotter vers la gauche, nous pouvons voir que le panier tiendra toujours dans une rangée avec la recherche jusqu'à 417px de large. Donc, je recommande simplement de réviser la valeur dans la règle des médias (en utilisant un nombre plus rond):

@media (max-width: 420px) { 
    #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu { 
    float: none; 
    } 
} 

Answer 2

.kad-topbar-left{ 
    float: right !important; 
} 

De cette façon, il ne prend pas toute la largeur sur les petites largeurs de fenêtre.