Desktop/tablet graphic

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.

Here are some screenshots:

My settings in Blocs:


Screen Shot 2022-03-22 at 1.06.35 PM

How it appears on the PC screen:

How it appears on my Mac screen:

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:

<div id="homeinteractive_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:100%;height:945px;overflow:hidden;">
	<script type="text/javascript" charset="utf-8" src="URLGOESHERE/HOME_interactive.hyperesources/homeinteractive_hype_generated_script.js?36342"></script>
</div>

I should note, I'm not a coder. I barely know any HTML, so please explain it to me like I'm a 5th grader!

what's your aim? a proportional scaling?

css solution:

<style>
.aspect-ratio-box {
height: 0;
overflow: hidden;
padding-top: calc(720/1280 * 100%);
background: white;
position: relative;
}
.aspect-ratio-box-inside {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<!-- your **responsive** hypedivhere -->
</div>
</div>

scripted approach: Creating a Flexible Tumult Hype Document within a DIV with no set 'height' - #20 by MaxZieb

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.

you'd need the structure posted above. i did a correction ... please consider :slight_smile:

or try the scripted solution. this approach may be even easier ...

posting a livelink along may help people solving your issue.

no, i'm not familiar with blocs

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.

no, was refrencing to my css/html above ...

the very, very simplest solution is aspect-ratio - CSS: Cascading Style Sheets | MDN ... but it's quite new and excludes some browers: CSS property: aspect-ratio | Can I use... Support tables for HTML5, CSS3, etc

again, the scripted version should be easy too: it's copy 'n paste:
https://forums.tumult.com/t/creating-a-flexible-tumult-hype-document-within-a-div-with-no-set-height/13224/20

in the end as always, please post a sample file and it'll be easier for anyone to help :slight_smile:

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).

HOME_interactive.hype.zip (228.9 KB)

1 Like

Thank you, it looks perfect! I'll take a close look to see what you did.

1 Like