web-dev-qa-db-fra.com

Définir la largeur de la table de module à la largeur du module

J'utilise le module Display News avec la classe personnalisée dn sur ma page d’accueil pour afficher les derniers articles publiés. La largeur du module est ajustée à la taille de l'écran mais uniquement si l'écran est plus large que 410px. Ainsi, sur un smartphone avec un écran de 320 pixels, le texte du module est coupé.

enter image description here

J'ai trouvé une solution temporaire, mais en définissant la largeur de blogdn width, la règle @media.

@media (max-width: 410px) { 

.blogdn {
width:270px;
    }
}

Mais je dois définir 5 différents max-width avec @media pour éviter que le texte ne soit coupé pour toutes les largeurs d'écran possibles entre 320px et 410px. Parce que ce n'est pas une solution très agréable, j'essaie de trouver autre chose.

J'ai essayé plusieurs approches, en ajoutant position relative au parent div, ou en ajoutant display: block; overflow: hidden; mais sans succès.

Toute aide serait vraiment la bienvenue. Voici mon site web: http://www.rscmovement.org/en/

Il y a aussi quelque chose d'étrange: sur la version française du site, le module est coupé lorsque la largeur de l'écran est de 400 pixels, mais pas sur la version anglaise. Impossible de trouver pourquoi.

EDIT: Ce travail semble mieux fonctionner que celui de @media, merci Lodder!

.moduletabledn{
display: block;
overflow: hidden;
    }

.moduletabledn tbody{
display: block;
overflow: hidden;
    }   

.moduletabledn tr{
display: block;
overflow: hidden;
    }   
.moduletabledn td{
display: block;
overflow: hidden;
    }
modulecustom-module
1
MagTun

La première chose que je ferais serait de rendre les images 100% largeur et d’utiliser display:block; pour les mobiles. Le texte ne doit pas entourer les images sur les mobiles car de longs mots peuvent pousser l'élément enfant à l'extérieur du parent.

Id suggère également d'utiliser une largeur de 100% plutôt que des pixels spécifiques pour la classe blogdn.

Vous avez également une marge et un remplissage en cours de paramétrage sur le megamod qui pousse le contenu.

Vous voudrez peut-être examiner la propriété Dimensionnement de la boîte vous allez utiliser des marges et des marges

1
Lodder