Jquery media height

[evey_k]

Hi @Armin-Unruh @arminunruh,

I have been trying to get help from colleagues of yours and somehow both of them are not able to help (never replied or attend to my problem constructively). I therefore asking you personally:

My carousel height is making my layout break. I have tried the Jquery Media lines to fix the height but it is still not working and i have no idea what i've done wrong.

On pic no.2 is my problem whereby between the carousel and the pic thumbnail has a gap. This only happens when i scale it down between 1053px-729px.
On pic no.3 is when the UI is fine.

I would really appreciate it if i could get finally a constructive feedback from you.

Here is my website: https://eveykwong.com/

Thank you!

[evey_k]

On a side note:
I have no idea / experience with JQuery. This is only my guess that the height needs to be fixed. fyi

[mariusjopen]

Dear @evey_k
the media queries is not the right approach. it only messes things up.
I recommend to strip it down first. Get rid of all the extra code you do not use to style and solve this problem.
Make a big carousel, place your thumbnails below.

Once you got his, let us know again, and we can have a look. Right now it is quite a mess with those media queries.

You will not need jQuery to do this.
Just CSS in the right spot.

Best!

Marius

[evey_k]

Hey @mariusjopen,

Thanks for the feedback!
i just removed the jqueries, the only css which are left for desktop is :
.carousel-full {
height: 100vh;
}

.lay-carousel.sliding {
height: 100vh;
}

.col .lay-carousel img.h100 {
object-fit: cover;
height: 100vh;
width: 100vw;
}

.flickity-viewport {
height: 100vh;
}

For general CSS:
button.flickity-prev-next-button.next {
top: 54vh;
}

button.flickity-prev-next-button.previous {
top: 54vh;
}

And mobile:
button.flickity-prev-next-button.next {
top: 22vh;
}

button.flickity-prev-next-button.previous {
top: 22vh;
}

Other than the layout breaking apart, same thing is also affecting the left/right arrows when browsers are scaled.

[mariusjopen]

Dear @evey_k
I think that this works:

.row.one-col-row {
    height: 100vh;
}

.row.one-col-row .lay-carousel-slide.lay-carousel-slide-img{
    height: 100vh;
}

Let me know!

Marius

[evey_k]

We are almost there... the layout doesn't break anymore. However, when browser scaled to iPhone size, the picture becomes fullscreen, which it shouldn't. Only the desktop and tablet should be on fullscreen. Is there a possibility to make an exception like this? (see pic A)

B is the status quo

[evey_k]

Sorry @mariusjopen I'm not sure if the solution you brought up solved the problem. My content pages with the spacing between text and images are also affected now when on tablet and phone scale (see screenshots)

It looks to me that perhaps the ratio of the images / carousel needs to be fixed by the height regardless of mediums (iPhone/iPad/Desktop)

Ok desktop version

Not Ok desktop version

Ok phone version

Not Ok phone version

[mariusjopen]

Dear @evey_k
yes. My solution was the first step into this direction.
We sadly cannot offer help in this big amount.
If you show this to a developer he should know what to do.
Or dig into it yourself.
Best!
Marius