Only my smallest width layout is showing

Hello,

When I upload my exported HTML5 document and paste the code in my website, only the smallest layout will show. Furthermore it doesn’t change at any of my set breakpoint widths.

Am I not uploading all of the layouts somehow? Or do you suspect that something in my site’s CSS is blocking this responsive functionality?

When I enter preview mode my layouts change at the correct breakpoint widths in the browser.

Thanks!

Can you share a link? It seems like you might be putting it within a non responsive container.

Hi Daniel,

That could very well be the case. You’ll see the hype animation in the
header. Here’s the link http://shoutkey.com/mulberry.

There is also some problem with spacing. For some reason it is aligning
at the top left of my

as opposed to where I want it to line.

Thanks for any help you can provide!

Best,

J

Daniel wrote:

BTW this is helpful for testing layouts: Safari's Responsive Design Mode

It looks like the document you embedded is within a div that has a max width of 789. Might help to place it out of that container, and instead place it within <div class="class="page-title right">

It should expand to fit the larger layout if your layout width is smaller than 789. Can you share your document?

Hey!

I tried putting it in a larger div that should work - but it still won’t expand to fit. And the spacing gets strange.

The Safari tool is great though!

Can you share your html + Hype document? I’d like to play around with this. You could send me a PM here if you’d like.