Comment faire pour supprimer la marge inutile du côté droit de mon site Web

Question

Mon site WordPress Utilisation du thème Quidus contient l'espace inutile de la droite qui semble très mauvais. S'il vous plaît aider: Comment puis-je supprimer cet espace? Je veux que mes pages Web remplissent tout l'écran. Il n'y a pas de marge nécessaire sur les côtés droit ou gauche.

Look at the image provided below of my website.

My Website Link is here

Note: Je veux que tous les messages pour adapter l'écran sur toute la largeur.

Answer 1

Votre structure HTML est:

<div id="page"> 
    <div class="site-content"></div> 
    <div class="right-sidebar-wrapper"></div> 
</div> 

Votre CSS est:

@media screen and (min-width: 955px) { 
    .site { 
    max-width: 1718px; 
    } 
} 

@media screen and (min-width: 1105px) { 
    .site-content { 
    width: 56%; 
    } 
} 

@media screen and (max-width: 1105px) and (min-width: 955px) { 
    .site-content { 
    width: 70%; 
    } 
} 

@media screen and (max-width: 480px) { 
    .right-sidebar-wrapper { 
    width: 100%; 
    } 
} 

@media screen and (max-width: 768px) and (min-width: 480px) { 
    .right-sidebar-wrapper { 
    width: 100%; 
    } 
} 

@media screen and (max-width: 1105px) and (min-width: 955px) { 
    .right-sidebar-wrapper { 
    width: 70%; 
    } 
} 

@media screen and (min-width: 1105px) { 
    .right-sidebar-wrapper { 
    width: 22%; 
    } 
} 

Le problème avec votre CSS est .site-content et .right-sidebar-wrapper largeur ne font pas 100% de leur parent.

Clarifions:

• à la largeur de la fenêtre> 1105px .site-content = 56%, tandis que .right-sidebar-wrapper = 22% si 56% + 22% = 78%, mais 100% - 78% = 22%, ce qui est là où le la marge provient de cette résolution

• à la largeur de la fenêtre> 955 et = 70% et .right-sidebar-wrapper = 70%, ce qui rend l'affichage de votre barre latérale droite ci-dessous .site-content parce que 70% + 70% = 140% si #page ne peut pas contenir au même ligne

Pour résoudre ce changement .site-content et .right-sidebar-wrapper règles CSS pour leur largeur afin qu'ils prennent 100% de la largeur de leurs parents à des résolutions que vous les souhaitez afficher à côté de l'autre.

solution possible est de changer:

@media screen and (min-width: 1105px) { 
    .site-content { 
    width: 56%; 
    } 
} 

@media screen and (max-width: 1105px) and (min-width: 955px) { 
    .right-sidebar-wrapper { 
    width: 70%; 
    } 
} 

à:

@media screen and (min-width: 1105px) { 
    .site-content { 
    width: 78%; 
    } 
} 

@media screen and (max-width: 1105px) and (min-width: 955px) { 
    .right-sidebar-wrapper { 
    width: 30%; 
    } 
}