1

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.

enter image description here

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.

Any help would be really welcome. Here is my webiste : http://www.rscmovement.org/en/

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;
    }   
1

First thing I would do is make the images 100% width and use display:block; for mobiles. Text should not wrap around images on mobiles as long words can push the child element outside of the parent.

Id also suggest you use 100% width rather than specific pixels for the blogdn class.

You also have a margin and padding being set on the megamod which is pushing the content.

You may want to look into the Box Sizing property is you're going to be using paddings and margins

  • Thanks a lot Lodder for the image style on mobile, it looks better that way! I have tried setting width:100% for blogdn but without success. Even if I remove the padding/margin on megamod, the problem still remains. To me, the problem seems to be on the table used by DisplayNews. The table has the class moduletabledn. I could set the table width to the same width than the div megamod but not the tbody. – MagTun May 16 '15 at 13:15
  • Well, thanks to you, I've found another work around: not sure it's best one but still it's better than @media + fix width. Please have a look at the edit in my question. It's based on the table. – MagTun May 16 '15 at 13:24
  • @Enora - Looking much better now. I would also add the following to your CSS file: .item.column-1 > a { display: inline-block; } which will push the tags and category below the image if there's no or little content. You'll see what I mean on the Finding the courage to question... section – Lodder May 16 '15 at 13:55
  • Thanks a lot Lodder for your extra work! I've added .blogdn .item.column-1 > a {display: inline-block;} just to make sure this won't affect the rest of the website. I'm happy it's fixed! – MagTun May 16 '15 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.