I use the module Display News
with the custom class dn
on my home page to display the last articles published. The width of the module adjusted to the size of the screen but only if the screen is wider than 410px. So on smartphone with a screen of 320px, the text in the module is cut.
I've found a temporary work around but by setting the width of blogdn
width the rule @media.
@media (max-width: 410px) {
.blogdn {
width:270px;
}
}
But I have to set 5 different max-width
with @media
to prevent the text from being cut for all screen width possible between 320px and 410px. Because this isn't a very nice fix I am trying to find something else.
I've tried tried several approach, adding position relative
to the parent div
, or adding display: block; overflow: hidden
; but without success.
Also there is something strange: on the French version of the website, the module is cut when the screen width is 400px but not on the English version. Couldn't find why.
EDIT: This work around seems to work better than the @media one, thanks Lodder!
.moduletabledn{
display: block;
overflow: hidden;
}
.moduletabledn tbody{
display: block;
overflow: hidden;
}
.moduletabledn tr{
display: block;
overflow: hidden;
}
.moduletabledn td{
display: block;
overflow: hidden;
}