Setting Max-width for Element

1

The logo of the attached Hype document is set to expand when resizing the browser window, but when expanded past around 1200px, the logo became obnoxiously large. I set the logo element ID to “logo” and added Max-width and Max-height properties within the Head HTML CSS so that it would stop expanding at a certain point. My only problem is that when it reaches the max width/height, it loses its centered position. I tried adding different properties to keep the logo in the center of the screen and used “!important” next to the values, but nothing worked.

Any ideas on how to fix this?

Max-width.hype.zip (20.7 KB)

2

Does unclicking the arrows on the flex layout help?

Max-width.hype.zip (28.1 KB)

3

Well the problem with that is I want it to expand the logo to a certain point, that's why the arrows were on.

4

Like so ?

Max-width 2.hype.zip (23.2 KB)

5

@jon4896

I’m surprised, I’m not able to do it with Hype without extra code.

you can change the size with CSS and Media Query with full control and smooth animation.

  /* smooth animation */
    #logo, #button_scale {        
    	-webkit-transition: all 0.20s ease-out;
    	-moz-transition: all 0.20s ease-out;
    	-o-transition: all 0.20s ease-out;
    	-ms-transition: all 0.20s ease-out;
    	transition: all 0.20s ease-out;   
    }
    
     /* change size logo */ 
     @media only screen and (max-width: 1024px) {
    #logo {	
    transform: scale(0.8) !important;
     }
    }
    
    @media only screen and (max-width: 768px) {
    #logo {	
    transform: scale(0.6) !important;
     }
    }
    
    @media only screen and (max-width: 480px) {
    #logo {	
    transform: scale(0.4) !important;
     }
    }
     /* change size button */
    @media only screen and (max-width: 480px) {
    #button_scale {	
    transform: scale(0.7) !important;
     }
    }

The alignment is done in Hype with groups

LIVE EXAMPLE

Max-width-2.hype.zip (133.4 KB)

3 Likes
6

Works great, thank you!

7

this is not a solution, however it's a decent alternative :slight_smile:
Unfortunately, when you add CSS code ( in percentuale or media query) to hype you lose the relative position.

8

for me i use several layouts and put alltogether in a persistant symbol.
you then can scale on different layouts to see your required width.
then activate all pins and the cross, also webkit must be off.
keep attention - the scaling also depends on where you set the mid-point-handler of the persistant symbol.
Max-width.hype.zip (40,0 KB)

2 Likes