XF 2.2 Is there a way to add padding to Article forums on mobile ?

gib

Well-known member
The article forum view looks great on desktop, but it appears in full width mode on mobiles, without any padding.

Is there a way to add CSS to a template to add some padding or a border when viewing Article forums in preview display mode ?

mobile_before_after.jpg
 
Last edited:
I have the same question and hope someone will have an answer for us soon.

EDIT: I don’t know if this is will work for everyone, but I just went to extra.less and added these -
Code:
.message--articlePreview .articlePreview-image {
    width: 95%;
    margin-top: 15px;
}
.message--articlePreview .articlePreview-title {margin: 0 5px;}
.message--articlePreview .articlePreview-image + .articlePreview-text .bbWrapper {margin: 0 5px;}
.block--previews .block-body > .message--articlePreview:first-of-type .articlePreview-image {margin: 15px;}
 
Last edited:
I have the same question and hope someone will have an answer for us soon.

EDIT: I don’t know if this is will work for everyone, but I just went to extra.less and added these -
Code:
.message--articlePreview .articlePreview-image {
    width: 95%;
    margin-top: 15px;
}
.message--articlePreview .articlePreview-title {margin: 0 5px;}
.message--articlePreview .articlePreview-image + .articlePreview-text .bbWrapper {margin: 0 5px;}
.block--previews .block-body > .message--articlePreview:first-of-type .articlePreview-image {margin: 15px;}
many thanks for that @lg19 , that works a treat :)
 
@gib I’m glad it works for you and thought you might like to know that I changed it slightly:

Code:
.message--articlePreview .articlePreview-main {margin: 0 5px;}
.block--previews .block-body > .message--articlePreview:first-of-type .articlePreview-image {margin: 15px;}
.message--articlePreview .articlePreview-image {
    width: 95%;
    margin-top: 15px;
    border: 1px solid lightgrey;
}
 
Back
Top Bottom