Help with overlapping areas - unable to manipulate heights

Hi,

I recently copied over this website (with permission) https://www.maynotcontainfish.net which is pretty much the same as https://www.maynotcontainfish.com except we wanted to run our own campaign and collect enews subscriptions.

The problem is that by adding the enews signup checkbox etc it is now pushing the containers down and hiding the main text area on small mobiles screens - 320px wide. I think the .com version has problems anyway with the footer missing on the small screen devices.

I’ve been trying loads of things to get the text area to show but i can’t for the life of me work out how it is being hidden. The closest i’ve got is manually changing the height of the section below to 700px in the code inspector. I can’t find that in the actual html or css??

<section class="swiper-slide second swiper-slide-active" data-hash="2" style="height: 500px;">

There is some JS for swiping that is being applied but i can’t see anything that relates to the 500px so i assume it is being generated based on screen height or something. Even that doesn’t do entirely what i want as it seems to push other stuff down and hides that??

If anyone has a moment to look and see if there is anything obvious i’m missing that would be extremely useful as i am at a dead end.

thanks

It looks to me that the problem is that the page is built on 100% heights and that means that any device with a viewport shorter than the content for that panel will be cut off.

This is happening on my desktop browser as I keep it in a quadrant of the window and rarely maximise it. On an iPhone 5 there is not enough height to display the panel either so the panels are cut off. This will also happen if you flip any of the larger phones also.

This is an inherent problem with those page full at a time scrolls and you need to reduce the content when height and width of the device does not allow a full page to be visible.

I am not in a position to test further as I am away at the moment so hopefully someone else can jump in:)

1 Like

Thats really useful info. That certainly explains why i was finding it hard to manipulate, I just wasn’t completely sure what was going on.
At first i quite liked it but the more i try to fix things the more i think it would have been easier to have rebuilt it from the ground up.

I think they tried to do something clever so you swipe and move to the next screen, but as you say if the screen isn’t big enough it doesn’t work. When i’ve done this type of thing in the past i had it scroll to an anchor point but the panel wasn’t clipped by screen height.

hmm it’s only a limited time campaign so might not be worth fixing for now.

thanks for looking

You’re welcome :slight_smile: Sorry I didn’t have more time to offer a solution.

Yes it’s best used for things like this where the panel has minimal content.

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