XF 2.1 solved-Mobile Portrait Mode in Forum List Latest Post Looks Bad!

[ActorMike]

I'm trying to find out how I can change my forum list to match my previous format below. The first image is the old style in XF 1.5 and the second image is the XF 2.1. As you can see the Forum name is scrunched in.

 

[djbaxter]

1. Did you update your old XF1.5 style to an XF2 version?

2. Have you checked for outdated templates?

 

[ActorMike]

1. Did you update your old XF1.5 style to an XF2 version?

2. Have you checked for outdated templates?

That's the default XF2 template with some color changes, there are no outdated templates.

 

[Russ]

When you add things like this:

.p-pageWrapper .node-extra {
    display: table-cell;
    vertical-align: middle;
    width: 280px;
    padding: 10px;
    font-size: 13px;
    background-color: rgb(242, 223, 255);
    border-radius: 15px 0px 0px 15px;
}

It's no longer considered the default style (default = unedited)

Add this to your extra.less template

@media (max-width: @xf-responsiveMedium) { .p-pageWrapper .node-extra { display: block; } }

Should adjust it for mobile

 

[djbaxter]

Very strange. That's not the way it looks on any of the XF2 forums I manage, with either XF default or custom styles.

What about old XF1.5 plugins?

Edit: posted at the same time as @Russ. Listen to @Russ.

 

[ActorMike]

When you add things like this:

.p-pageWrapper .node-extra {
    display: table-cell;
    vertical-align: middle;
    width: 280px;
    padding: 10px;
    font-size: 13px;
    background-color: rgb(242, 223, 255);
    border-radius: 15px 0px 0px 15px;
}

It's no longer considered the default style (default = unedited)

It's amazing when you are doing a major upgrade what changes made are quickly forgotten! lol

 

[ActorMike]

When you add things like this:

.p-pageWrapper .node-extra {
    display: table-cell;
    vertical-align: middle;
    width: 280px;
    padding: 10px;
    font-size: 13px;
    background-color: rgb(242, 223, 255);
    border-radius: 15px 0px 0px 15px;
}

It's no longer considered the default style (default = unedited)

Add this to your extra.less template

@media (max-width: @xf-responsiveMedium) { .p-pageWrapper .node-extra { display: block; } }

Should adjust it for mobile

I corrected my CSS. I was using Google Chrome inspector and copied some of the desktop CSS settings. Works fine like this below:

Still not totally satisfied with how the node-extra looks, but it is acceptable. Thanks for getting me in the right directions @Russ

.p-body-main {
    background-color: white;
    border-radius: 35px;
}
.node-extra {
     background-color: #f2dfff;
     border-radius: 15px 0px 0px 15px
}
.p-body-inner {
     background-color: white;
}