Change proportions in mobile view only?

Ask the community
, ,
1

I’m having trouble with
I’m making an art portfolio website that features four main categories of art. I want to make a grid of four squares on the right that show a preview when you hover your mouse over them in a preview panel on the left. I set it up and it looks good on the desktop version. I set everything using vh and vw and then used cells. So, I have a main section that is 100 vh, then two cells divided vertically, the cell on the left is the preview showing art, and the cell one on the right is subdivided into more 4 cells (I’m using the Advanced CSS grid) and each of those has a container with an attached hover effect. The issue is that on mobile version, the 100 vh is making the whole shebang very elongated and it looks terrible. I want it to stay looking the same on the desktop version, but have the mobile version stay proportional to the look of the desktop… so roughly a 3:2 ratio of width to height. (eg. 3 width/2 height). I’m very new to this. When I searched, I could only find information about showing and hiding elements specific to the mobile version. Is there a way to set the section width and height that is specific to the mobile version and does not effect the desktop version? If not, what is the best way for me to handle this?

Working in
Wix Studio Editor

Site link

Thank you for the help! This is only my second Wix website and I’m still figuring things out. My first website was very simple (my portfolio website: https://www.lightship-design.com/) and I’m trying to challenge myself a bit more with this one.

2

If you are using advanced CSS grids then yes, you can adjust the size of these and the content within without affecting other breakpoints.
I use this practice a lot with mobile sites so I have full control over the layout.

3

Okay… how??? I can adjust it just on mobile? Even if I can keep the desktop version roughly the same, but change the whole thing that’s fine. I need a hand-holding ‘explain it to me like I’m six’ explanation. I don’t think what I’m doing is super novel, so there has got to be a standard solution to it.

4

Oh, I’m dumb. I can change JUST the mobile version by just selecting that ‘breakpoint’ on top. I thought it would change everything. Yay for learning new things. Thank you!