Mobile message layout.

[Bradley Prout]

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

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

 

[Russ]

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:

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