Template for a responsive website

Hello, i've made a couple of years ago a website with Wordpress,
its for a good cause running event.

but when I want to changed it now..I get a update for 99 dollar..for the plugins,which I use a few years ago
a lot for just een simple site...so I thought maybe I make it in hype..

I've tried it before...and always struggling with the responsive..is there anyone with a template, which I can change, just bij editing text and images..

when you have please...

Maybe this helps…

You can see it in action here…

thanks, im gonna try, looks good

Sorry im trying to change the input, but when I do, the page isn't working anymore with the tabs.

-The tabs are now, one, two, three, four, five...I want to change them to other words

  • i want to delete the gird, but when I do , the tab navigation doesn't work anymore

  • and I like to make the upper banner sticky, don't know how..

im a little bit in a hurry while I want to make a simple site live...

no special things for now, maybe later..

hope you have some answers

So, this has to be done in two places, once in the “Small” scene and again in the “Medium” scene. Basically, in the timeline there layers, there's a folder called “Mini Menu” in the small scene. That has the five layers for the five buttons. Just edit the inner HTML of those elements to change the text…

The Medium scene has one “Menu” element, where all five buttons are together as HTML. Just change the text part, not the “data-button” part.

Did you delete the whole element? Instead of deleting the grid, you can just change the background.

This template is just for the menu to be sticky. Making the whole banner sticky is possible, but that is a bit of work. It's why I suggested the “Sticky” option in the Hype 5 ideas list.

This template uses JavaScript to make the menu stay on the screen. There's a much easier way… https://www.youtube.com/watch?v=2EK6-ct5K_c&list=PLORkPhKfIRgkRqXwyq5_DYTHMi8mxFSVH&t=220s

I'm also in a rush right now though. So, at least this information could be a good starting point. :slightly_smiling_face:

1 Like

thanks, im gonna try right away

Sorry, I didn't succeed totally...but think im getting there..

Im try to make a charity site for a run event with the effort for a cancer charity fund.

What I want is actual a site, for phone, iPad, dekstop, so I thought with 3 breakpoints.
I didn't need the menu, so Ive erased that

for now the phone site works, but im getting problems with the responsive for the other two...

Dont know, what to do next...ive tried a lot, but fail when I view them on other devices..

I hope someone has a advice...before this, I had made it in Wordpress with someone plugins, which is getting me crazy..and this run is a yearly event..

so I prefer a basic hype site..

https://www.dropbox.com/scl/fo/txhtsxkxvb8c6bk7ycock/AKgFEzzotj9hRqZNOh0swlQ?rlkey=aooccgamvtg1nrklhkwyrcmsu&st=hlluprvk&dl=0

The result for now is on

http://macworksreclame.nl/kraaienrun/kraaienrun.html

I think that's part of the problem you're having. This template is example of what's possible with Hype, but it's explained that this is a tough way to work. Even the article I wrote says… “The software isn’t optimized for that job. But for a static website… eh… it can kinda work.”

So, the reason this is difficult is because Hype is more like Flash than it is like Dreamweaver. Trying to use Hype for page layout is going to have some difficulty.

Similarly, the template is designed to have a menu. By taking out the menu, and having a different element stay stuck, you're entering custom code land. Here's an example of why that's a problem…

If you view the source code on your page / show the console, there are errors being thrown. That's because the menu was removed. Every time the page is scrolled, the JavaScript code is looking for that missing menu.

So, if you don't want the sticky menu… or menu at all… you might want to remove the JavaScript being run on Layout Load…

(That's in both layouts… Small and Medium.)

But also, why do you want to give yourself more work? It looks like the menu might be useful with the current setup. I'm surprised that you removed it. I suppose it is a design choice, as you now have that big date box.

But if the primary goal is to just have a static website, why fuss with custom features?

It seems that emphasizing the date… Saturday, May 10th …is another priority. That's a new feature. It's extra work. You want the date box to tilt and expand past the other parts of the banner.

It looks like you got that almost working though, as I see the banner using a “sticky” class. The problem is that some text is now hidden underneath the banner.

I did a little experiment and tried things a little different. I selected all of the elements related to the banner and then grouped them. I gave that group element a class name of “banner”.

It was also important to make sure that the group was flexible…

Do you see the pins and the arrows? That's so the banner stays at the top and stretches horizontally.

Then I added CSS to the Head HTML…

          .banner {
               position: fixed !important;
               top: 0px !important;
          }

When I did that, the banner stayed at the top. There wasn't text underneath, which seems to be a problem in your example. Although, after making these changes, the menu doesn't look right in my example either… and the banner hides text when clicking a button.

So, that goes back to the main idea. By trying to change the template to do things it wasn't designed to do, that creates a lot of work.

Possible Solutions…

  • Keep it simple — Use the template as designed. Alternatively, instead of making the whole banner sticky, maybe just make the date sticky.
  • Start from scratch — By starting from the beginning, and not using the template, you're not having to work against existing code or previous design choices. It's tougher at first, but you'll likely learn more and possibly have a Hype project that's easier to maintain / update.
  • Keep Fighting — You are close. There are some problems, but they seem fixable. (It's just a lot of work, even for experienced developers.) You can start by write down exactly what's not working and then try solving the problems one at a time.

I see at least three problems…

  • The text is blurry. Is there a missing font?
  • The text is hidden under the banner.
  • The text boxes are shifted to the left.

And again, there's the JavaScript error by removing the Menu.

The general idea is good though. I created the Hype page years ago. It's been nice not having to mess with it. I did have to update some info, but that wasn't too bad. I just went back to the Hype Template.

1 Like

thanks, im gonna try tonight..

but what do you advice...go one..with this...or back to the hype template??..the one with menu?

I just only want a responsive site...with screen wide videos...with 3 formats, phone, iPad, desktop

If you want three breakpoints and no menu, it might be easier to start from scratch. It looks like you understand the general idea, so it's just a matter of practice and fussing with the Hype project until you get something that you like.

This part is tricky, as the template uses a fixed height. If the video maintains the aspect ratio, it will get taller as it gets wider. That could cause text getting covered again.

In general, I've managed some layout problems by dropping images and text into scrolling text boxes. It was a very tedious way to work though — and it involved a lot of CSS. As an example, breakpoints were set manually…

Just as "sticky" was able to solve one problem, there are other tricks with CSS that might help… such as Flexbox and Columns. That was also my list of recommendations for Hype.

But in general, if you're finding this frustrating, it's because it's a frustrating problem. :smile:

1 Like

thanks, maybe I want to much ,
im gonna try and maybe let the screen wide pictures go

Arent there any template for hype that I can buy?

ps. it looks like this forum is not busy as before...which Is disappointing, hype is next to indesign, photoshop my major tool

,.not for website building :rofl: but for ads