Adjust the Skinned View Header Height

The WP3D Models “Skinned” view has a header size that was built to give priority to your virtual tour content. However, if you’d like to modify how much space this area occupies, you’ll need to do so using some custom CSS that overrides the default values. Because WP3D Models was built to be responsive and “mobile friendly”, you’ll need to provide a few different rules to affect the various “breakpoints” that exist in the default CSS code.

NOTE: Keep in mind that any changes you make will affect ALL of your Model “Skinned” views. Additionally, adding CSS to your site is an advanced feature that can easily bust things up if you enter malformed code. USE AT YOUR OWN RISK!

Default CSS Values for the “Skinned” View Header:
You’ll want to copy/paste the content below and then paste it into the “CSS RULES” box found inside your WP3D Models “Settings”:

WP3D Models --> Settings --> CSS/JSS (Tab) --> CSS Rules

Be sure to adjust each of the various breakpoint percentages until you’re happy with how your customizations look. Also be sure that you test on various sized (real life) devices and/or use the Chrome Developer Tools Device Simulation to get a better approximation on how your “Skinned” Models will look on various device sizes.

<!-- LARGER DESKTOPS -->
@media (min-width: 1500px) {
.wp3d-skinned-crosby .wp3d-embed-wrap {
padding-bottom: 45%;
}
}
<!-- SMALLER DESKTOPS & TABLETS (LANDSCAPE) -->
@media (min-width: 1024px) {
.wp3d-skinned-crosby .wp3d-embed-wrap {
padding-bottom: 56.25%;
}
}
<!-- TABLETS (PORTRAIT) -->
@media (max-width: 1023px) and (min-width: 768px) {
.wp3d-skinned-crosby .wp3d-embed-wrap {
padding-bottom: 80%;
}
}
<!-- PHONES (LANDSCAPE) -->
@media (max-width: 767px) and (min-width: 481px) {
.wp3d-skinned-crosby .wp3d-embed-wrap {
padding-bottom: 80%;
}
}
<!-- PHONES (PORTRAIT) -->
@media (max-width: 480px) {
.wp3d-skinned-crosby .wp3d-embed-wrap {
padding-bottom: 140%;
}
}