CSS for testing responsive layouts

I’ve been using some CSS to help with testing a responsive design I’m working on and thought I’d share it in case it can help someone else.

This project has just one breakpoint at 768px. Below 768px I want the design to grow with the width of the browser, but I always want the aspect ratio to be 1:1.
Above 768px I want a fixed height of 864px.

I save the file as style.css in the hype resources and tick “Include in the document head” for it to affect the preview:

@media screen and (min-width: 769px) {
	#index_hype_container {
	height: 864px !important;
@media screen and (max-width: 768px) {
	#index_hype_container {
	   height: 100vw !important;

So to explain how this works, the hype preview always uses a container with the id index_hype_container so I target that to set the height. The exported version does not have this so you’ll need to target the container you use on your site.

I want different CSS rules above and below 768px wide so I use the @media queries for this.

For the mobile version I’m using 100vw. vw is 1% of the current viewport width, so 100vw gives me 100% of the current viewport width. As the browser width changes bigger this CSS changes the height to match the current width.

If you need a different ratio between width and height then change this ratio. For example if you want the height to always be double the width then use 200vw.


Nice! This brings to thought it would be great to have a ${documentName} just like the resource path variable.

1 Like