Hello, I'm creating an interactive Hype graphic that will embed in Blocs and appear only on the tablet and desktop breakpoints.
The interactive graphic needs to be edge-to-edge. My laptop is a 2048x1280 (Mac) whereas most people in my office have PCs that are 1280x720.
My problem is that the graphic does not look good on both the Mac and PC desktop sizes. I feel like Im not setting it up right in Hype.
One note: When I add it to Blocs, I can't have both the heigh and width "scale" selected. It doesn't appear in Blocs (I think Blocs is reading it as 100% of 0 pixels). So, I've unchecked "scale" the height.
I think I understand what's happening - because i don't have 100% scale selected for height, too, it is cutting it off at the top and the bottom, depending on the screen size? I just dont know how to fix it.
Here is the code I used on the Blocs site to place the graphic in the code editor:
Maybe this is an oversimplification, but from your screenshot, you are using "expand to fill" for the scaling behavior. Perhaps you want shrink to fit? It also might be that your image's proportions don't need to be maintained, in which case you could choose "stretch".
Jonathan, Thanks! I just tried setting everything to "shrink to fit" but it's no longer edge-to-edge when I do that (image 1). I then tried "stretch" and it skews the graphic unfortunately (image 2). I wish there was a way to make it edge-to-edge, while maintaining the proportions and not cutting anything off.
Yes, I would like to scale proportionally! I have all the objects grouped so they do not slide around when the site scales. So, I could just add this in the header of the Blocs file? Would I need to assign "aspect-ratio-box" and "aspect-ration-box-inside" as a class, to the code widget on the Blocs page? The code widget is where I put the code that's in my initial message. If you're not familiar with Blocs, no problem! I know it's sort of a niche software.
Hi there! Thanks - I was wondering, when you say "you'd need the structure posted above" - are you referencing Jonathan's suggestion? I tried that out but unfortunately it didn't work (see the post reply above). I'm hoping to solve it without code as I don't know how to code really, and it usually gets me in trouble when I try. Blocs is a web building platform that doesn't require code, fortunately for me.
Thanks, I'm sorry. I'm trying to follow but I think I need to take a CSS class - I really don't understand the directions well. HOME_interactive.hype.zip (251.1 KB)
Here is the file I'm working on. I will eventually make all the food items links (I haven't done that just yet but do know how).