Large marge dans la vue mobile avec trop de balises importantes

Question

J'ai un problème avec le CSS sur mon site Web. Il semble très bien dans la vue de bureau, mais dans la vue mobile, il y a une grande marge droite qui déforme la barre latérale. Voici le lien vers la page. https://www.bearcountrybees.com/store/

Si vous avez des commentaires sur ce que je devrais faire pour réparer ce serait génial. Merci!

Answer 1

Il est probablement parce que vous définissez une valeur pour les emballages avec largeur important où il devrait être de 100% pour les écrans mobiles et essayer d'éviter d'utiliser important raison de les remplacer, nous devrons utiliser plus important « s.Like ,

@media only screen and (max-width: 767px) { 
.bSe right, 
.sAsCont .sAs { 
    width: 100%; 
} 
} 

Si elle est vraiment l'utilisation important nécessaire par exemple.

@media only screen and (max-width: 767px) { 
.bSe right, 
.sAsCont .sAs { 
    width: 100% !important; 
} 
} 

Answer 2

D'après ce que je vois, vous n'avez utilisé aucun framework comme BootStrap pour votre site web. Dès la prochaine fois, s'il vous plaît utiliser un cadre, il va résoudre beaucoup de problèmes pour vous.

Vous pouvez élargir la barre latérale sur toute sa largeur sur des écrans mobiles comme celui-ci.

@media only screen and (max-width: 767px) { 
.sAs { 
    width: 100% !important; 
} 
} 

Answer 3

Vous avez eu trop de largeur appliquée sur la .bSeCont .bSe, la meilleure façon de faire CSS est pour vous, la dernière était les règles qui font que votre page soit avoir une grande marge sur la right est le .bSeCont .bSe {width: 67%! important; } sur la ligne 409. Une façon de corriger cela est que vous soyez très précis sur votre css pour pouvoir remplacer ce ... Essayez celui-ci ...

.cnt .bSeCont .bSe.right { width: 100%!important; }