Bradley Prout

Well-Known Member
I want to change the way it looks from the first image to the second one. Cleaner and looks tidy.

The problem is when I change it to the new layout it's messes up the desktop view. Here is my code for the mobile header

Code:
.Responsive .messageUserBlock h3.userText {
margin-right: 16px;
margin-left: 59px;
height: 48px;
}
.messageList .messageUserBlock div.avatarHolder, .quickReply .messageUserBlock div.avatarHolder {
margin-left: 1px;
top: -60px;
}
 

Attachments

Russ

Pixel Exit Staff
For things you want to target in mobile only you need to wrap in a media query:

https://xenforo.com/community/resources/responsive-design.2193/

For the message bit it collapse at the 'narrow' width, so your css could look like:

Code:
@media (max-width:@maxResponsiveNarrowWidth) {
.Responsive .messageUserBlock h3.userText {
margin-right: 16px;
margin-left: 59px;
height: 48px;
}
.messageList .messageUserBlock div.avatarHolder, .quickReply .messageUserBlock div.avatarHolder {
margin-left: 1px;
top: -60px;
}
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.