Mobile browser window cuts off content + parallax backgr image margin + 2 col accordion

Support
#1

Hola rockstars!

I have 3 questions about things I believe are impossible - even for you :blush:. Please let me know if this is possible:

  1. FIRST IMAGE: Full size hero header has problems on mobile and tablet with the lower part of the browser window covering the lower items in the menu before scroll. Is there a more sophisticated way to solve this than just giving the items more bottom margin? I don’t like this as it looks ugly with the extra bottom margin once you scroll over it. I would like the outer margin to be equal in the top and the bottom of the hero.

  2. SECOND IMAGE: I saw the support video on giving lower image in a parallax background different @media sizes. Is that the only way to make sure the chef background image does not get cut off in the top? Isn’t there any way to sort of give that chef image an automatic margin top function that bumps it down? I have to write like 10 @media queries for each image now.

  3. SECOND IMAGE: Is there a way to make my 2 col accordion 1 seamless col (without a break in the middle) on mobile? I wanna avoid solving it with double content and hiding stuff on different screen sizes, if possible.

Happy New Year, awesome you!

<3

#2

Hi @Lobsterass,

Thank you for writing in, 1) Sorry there is nothing we can do about it, that is a browser/device vs design specific issue, as on other devices that header layout is just perfectly fine (no tab covering). It’s up to you if you add a bottom margin to resolve that issue on your device but cause the extra bottom margin or no extra margin to keep the outer top and bottom margin equal, you need to compromise.

  1. I don’t see any issue here, I see your image has a (natural) space at the top and then background-position it to center bottom. That’s the way to do it, I’m not sure about 10 @media queries.

  2. Please set the Row’s Gap Height to 0.



Layout Tricks: Using Column Gaps as Dividers

Happy holidays,
Cheers!

1 Like
#3

Hi!

OK. Thank you!

Regarding question 2 about the background image, I’ve tried setting it to center bottom and cover bottom. When I make it work on one screen size it starts looking bad on another. I would like the image to reach all the way up without getting the top cut.

<3

#4

Hey @Lobsterass,

For 2, please try a VH unit based Background Size and Percentage Based X position like in the following screenshot.

-----------------------------------------------------------------------------------

I just like to comment about your problem #1 as it looks like it’s possible using VH based unit for height as well as margin. First, watch the video following video.

If that is what you want to achieve, use 20 VH (rough estimate) top margin for your image and 30 VH (rough estimate) bottom margin to the down arrow button. Try playing around with VH values.

Hope that helps.

1 Like
#5

Ah! VH seems to be a much better way to do it.

Thanx! <3

#6

You’re welcome!
We’re glad @Christian and @Friech were able to help you out.

1 Like
#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.