4 equal sized images side by side in horizontal band


(Gary Tamblyn) #1

Happy New Year Everyone :smile:
I think Hype is amazing and always look forward to new updates. 3.5 is brilliant.

I’m trying to get 4 images side by side horizontally with no gaps to fill the width of a web page. Then when the web page is scaled, the container for these images expands horizontally but not vertically. Similar to the 4 image buttons on the lower half of Apple’s Home Page.

Is there any way to do this in Hype ? I’ve tried several methods, including grouping the 4 images, but every combination I try, the images seem to bunch up and overlap each other.

Any Help greatly appreciated :blush:


(Mark Hunte) #2

Hi,

Can you post your project so far…


(Gary Tamblyn) #3

I’ve not really done anything yet as I’m not sure hype will do what I’m looking for. I’ve fallen at the first hurdle :smiley:

I just basically want 4 rectangles, side by side, to span the width of the screen, scaling horizontally but not vertically.

Eg the boxes remain 200 pixels high, and scale to 400 pixels wide if the page width is 1600 pixels, or 300 pixels if the page width is 1200 pixels. and all arbitrary sizes in between, so 326 pixels if page width is 1304 pixels wide.

Thanks
Gary


(Mark Hunte) #4

This may be what you are after.

Scale the scene width.


Group the elements and then select the group.
On the Group .
Pin it to Left and Right and size it to expand horizontal .
Set to Zoom contents.

stretch.hype.zip (11.9 KB)


#5

Thanks mark, looks cool. Is it possible to add content to each block and not have the contents stretch, just the background?


(Freelancer) #6

This is quite similar, the image become responsive only in large windows.
in hype you have to relativize the position of each box.
each box must inherit the settings of the father with specific differences (for example, the image that fits vertically)

live preview

4_columns_with_images.hypetemplate.zip (487.3 KB)

hope this helps
Michelangelo


About the Responsive category
Creating a fullscreen site
How to not stretch Text in responsive document
(Gary Tamblyn) #7

That’s brilliant, Thanks Mark,
The example really helps, and shows me where I’ve been going wrong.

Like tofolux I was also looking for the content to not stretch and I think Michelangelo has provided a brilliant demo, that’s exactly what I was after.

Many Thanks :slight_smile:


(Gary Tamblyn) #8

Hi Michelangelo,
That is amazing !!! That’s exactly what I was looking to achieve, with the image centres staying central as well. Absolutely brilliant. Your diagram shows the parent child structure so clearly, similar to CSS. Love it !

That answer should be flagged somewhere, it’s so well put together. :smiley:

Thank you so much.
Gary


(Freelancer) #9

no, Hype is amazing!
I’m glad you solved. in the same way you can do 2,3 or even 5 columns.

the next step is the responsive behavior of 4 columns on an iphone.

I have more staff, just wait :smile:

Michelangelo


#10

Hi Gary

You can mark it as solved (box with a tick in it) so that people can see that it was the answer


(Gary Tamblyn) #11

Thanks, i did click on bookmark and the like icon, didn’t see the tick as well. All done now, thanks for the hint. Easy when you know how :smile:

I’m still getting used to the forum. Some of the buttons ‘+ topic’ and ‘Reply’ underneath text that’s just been written, I think should read ‘submit topic’ or ‘submit reply’, because they initially gave me the impression they were to create a new reply or add another new topic, instead of submitting the one I’d just written. But I must admit I do get easily confused :smile:


#12

Thanks for this! This has been a really big help!


Responsive document height
(Freelancer) #13

@gaz @tofolux here an improved version with responsive behavior and multiple columns

Fluid_Columns_Basekit.hypetemplate.zip (1.1 MB)

PREVIEW and info


(Gary Tamblyn) #14

That’s absolutely brilliant ! It works really well.
Thank you, that’ll be a really big help. :smile:

Gary


(Freelancer) #15

@gaz thanks. This simple trick can help you more.


(Gary Tamblyn) #16

Sorry for my late reply, I’ve not had the chance to see this on a desktop machine.
That could be really useful. Thanks


(Freelancer) #17

@gaz @tofolux

as you can see with the first template + the second trick you can build responsive symbols without text clones.


(Marcos perez) #18

Hello, I’m working on a project, but I have problems to do my project response, I do not know how to make it show full screen, only width it’s responsive but height isn’t


(Freelancer) #19

the layout of the page or a popup in overlay?
can you provide an example?


(Marcos perez) #20

I tested it in another screens and it is not displayed correctly
seguir.hype.zip (367.8 KB)