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.