Start a new topic

Hamburger icon jumps when clicked on

My customized hamburger menu shifts diagonally a bit when the menu is opened. I'm not sure why this is happening size the customizations implement a 0 value for both vertical and horizontal transformations:


/*Hamburger Icon, Remove Transformation to X*/

.frontApp .MainMenu .hamburger.open .bar1, .frontApp .MainMenu .hamburger.open .bar2, .frontApp .MainMenu .hamburger.open .bar3 {

    -webkit-transform: rotate(0deg) translate(0px,0px);

    transform: rotate(0deg) translate(0px,0px);

    opacity: 100;

}


Does anyone have any suggestions? Thanks!


I understand, this is helpful. Thank you very much for all your help!

Hello,


I believe it's the padding for the landscape, I can't really remember well because I did a lot lately. But from what I can still remember, I considered a lot fixing it on your site since there's some padding outside of some elements already. It's hard to explain but I hope you get my point. It's like the container outside of the child element already has a padding or margin so I need to take that to consideration. As you can see the padding I added doesn't have the same value for each side - 0 top 6 right 0 bottom 2.5 left. 



Arvin (Forum Moderator) 

Thank you so much, Arvin! All the changes look great, thanks for placing the contact form beside the text-- it did look awkward. And the desktop page looks awesome too. This is great.


Just for my knowledge, what part of the CSS accomplishes this?: "Fixed the margin so it would align to the upper section (mobile - both landscape and portrait)." Normally I can figure it out but this time it's eluding me since I don't see two margin-left statements, only one, and nothing happens when I change it.


Thanks for all your help!


Hello,


No worries! I have added the CSS fix to your website, I hope it fixed all of your concerns. Please refresh your mobile browser and check your site again. 


- I made the text wider beside the contact form for desktop. 

- Fixed the margin so it would align to the upper section (mobile - both landscape and portrait).

- I made the form to have the same size as the paragraph for the contact form (Mobile - portrait). 

- I placed the contact form beside the text for mobile landscape as it looks awkward below the text. 



Arvin (Forum Moderator)

Thanks, Arvin! At first I didn't see any effect, but then I made a couple of changes to your code, which then worked:

@media only screen and (min-width: 401px) and (max-width: 999px){

 .right.pbElements.pbSortable{

  font-size: 0.51em /*!important*/;

 }

}


However (sorry, haha...), this causes the whole contact box section to become extremely tiny (in landscape mode). Screen recording attached. Which leads me to my question - Is it possible to set the size of all objects on this page via css, so that they all stay the same size relative to each other?


I am also having issues with indentation/margin alignment on the same page (also shown in the same video and supplementary photos). There seems to be no way to match the indentation of the different sections on this page, because the "Style in Mobile" on the point-and-click options don't allow changes to right and left margins-- only top and bottom. So, that means I need to choose a left margin for the Past and Upcoming Exhibitions that works for both the desktop and the mobile versions, which is actually impossible. In desktop, I would like the left margin to match the left margin of the photo above, and for the text box to be a wider. In mobile, I want the margins to match with the About section text above. Both of these together are not possible with point-and-click options. Is it possible for you to put the template for this in css so I can play around to choose the right settings? I can't always find the correct name for objects & settings via the browser developer.


Thank you for your help as always!


IMG2483.jpg
(814 KB)
IMG2482.jpg
(729 KB)
MP4

Hello,


Thank you for providing the screen recording. I understand the problem much better now. I have added a CSS code to fix this issue, please try refreshing your page again and check your site via mobile.


I'm very sorry if we keep getting back and fort with this. I hope everything will be okay now.



Arvin (Forum Moderator)

Hi Arvin,


I updated to iOS 14.4 on my 6.1 inch phone, then restarted the phone, cleared the Safari cache, and checked-- same issue. I'm uploading a short screen recording here, during which I show the change from portrait to landscape, hopefully this helps. Let me know if I can provide anything else.


Once again, thanks for all your help, on this and other items!

MP4

Hello,


You're welcome! I still can't replicate the issue, I used iPhone 6, iPhone 6s and iPhone 7 (safari browser). Can you try upgrading the OS version of your phone to 14.4 if possible? If the same issue persists, please send me a screen shot or it will be best if you can send me a screen recording. Then I will send it to the development team for further investigation. 



Arvin (Forum Moderator) 

Thanks, Arvin!

I logged in, went to the About page, hit Reload this page, then cleared the mobile browser cache, then went to the website and checked. Unfortunately, it remains the same.


I'm checking on three different iPhones (6.1 inch, 4.7 inch, and 5.8 inch) using Safari on iOS 14.3.

Hello,


I'm sorry for the delay. I tested it again on my actual phone this time and I still can't replicate the issue with the text. Please try logging into your account > go to your about page > refresh the page and then go check it on your mobile browser. If the same issue persists, please send me the type of mobile device you are using, the OS version of the device, and the type of browser you are using in the device.


Arvin (Forum Moderator)

Ah, I see. Interesting. I cleared the cache a couple of times and it's still happening. I've tried two different phones on landscape, one a 6.1 inch screen and the other a 4.7 inch, and it happens in both. I suspect it isn't the CSS options that is causing this, since I haven't added anything to the About page text, only the contact form. I would guess it's more likely the options within the point-and-click system. I've noticed that setting margins/padding and max-width etc. sometimes has unintended effects.

Hello,


Yes, I'm sorry it will require the menu to be a bit wider to fix the other problem.

I agree, there's a lot of CSS customization added to your site already so there might be a line of code that messing with the font size of that specific text. However, I still can't replicate it on my end. It seems to be okay and have the same font size on my end. Can you try clearing the cache of your mobile browser and check your site again? 



Have a great weekend!

 

Arvin (Forum Moderator)

Thank you, Arvin! Yes, it is working now on both wider and narrower screens, no shifting happening. :D But the menu bar (height 5em) is much taller than before (it was around 2em). I tried to play around to shrink it back to 2 em, but that causes issues with opening the menu. Does this responsive fix require the menu bar to be taller?


With the font on the About page, it's actually not the custom font that is causing issues. It's the Times New Roman. I set all the Times New Roman on the page to be 1.11 em using the Font options (point-and-click), but the top section shows up as much bigger on wider mobile screens than the bottom section (pic attached). There must be some other option that's causing this collateral damage but I can't figure it out.


Thanks!!

Hello, 


No worries! Sorry for missing the wider screens. I added CSS code again, hope it fix it this time :) 


As for the fonts, it might be because you are using a different font style on your about page. You can give me more information about it and I'll try to check if I can do anything to it. Again, I can't guarantee anything but I'll try my best to help. 



Arvin (Forum Moderator) 


Hi Arvin,


Thanks for looking into this. Actually, I think the additional code has maybe exacerbated the issue. Options at the bottom of the menu are now no longer visible on landscape/wider screen view, and the menu icon shifting persists for wider screens and has returned for portrait/narrower screens. Also, the menu bar has widened considerably. 


I think this responsive design issue might be slightly bigger than just the menu though, since I've noticed the font in some sections on the About page scales up differently than the font in other sections on the same page, though they are both set using the point-and-click method, not css. So this might be a topic for a different, more involved thread, which I can start and post pictures for if you feel you have the bandwidth to look into it now - let me know. I don't want to swamp you :)


In any case, the solution you gave earlier works well for the portrait/normal phone size, which is what most people would see. Thank you!!

Login to post a comment