Team Layout for Mobile / Responsive

[tangent24]

We are having issues with the formatting of individual team pages — particularly when viewed on mobile devices (in particular, smartphone dimensions). The proportion between text and image is maintained as the site scales down, which is okay for tablet dimensions but is dysfunctional for smaller screens.

It would be more intuitive to have the same “bootstrap” treatment on the team pages as the rest of the site (i.e. full-width image up top followed by full-width text below). Is this possible? If so, what code do I need to change?

Thank you.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

@media only screen and (max-width: 768px) { 
article.type-team .article-body-wrap {
	width: 50%;
	float: left;
	margin-right: 10px;
}
article.type-team .profile-image-wrap {
	float: right;
	width: 48%;
}
}

@media only screen and (max-width: 490px) { 
article.type-team .article-body-wrap {
	width: 100%;
	margin-right: 0px;
}
article.type-team .profile-image-wrap {
	width: 100%;
}
}

– Kyle

[tangent24]

Fantastic. Thanks, Kyle.

[Kyle – SUPPORT]

No problem

– Kyle