Scale top parallax layer in “big title section”

  • Resolved kaitlyn_

    (@kaitlyn_)


    3 years, 9 months ago

    Hello,
    I’m using the parallax effect in the Big Title Section in the Hestia Lite theme.

    It looks lovely on desktop, but as many have complained about in other forum posts, the cropping is quite extreme on mobile. But that’s fine — I picked a background image that can be cropped and still looks good.

    The problem is the foreground image. I want this one (my logo) to scale to fit.

    I was hoping someone with more familiarity with Hestia (and wordpress and CSS in general, haha) could help me figure out the CSS to make the top/foreground image scale to fit.

    Many many thanks in advance!
    –Kaitlyn

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Mat

    (@mateithemeisle)

    Hello @kaitlyn_ ,

    Thank you for choosing Hestia!

    Unfortunately the parallax effect is not available for mobile. The only way to make the website look cleaner and nicer would be to remove the big title section of mobile all together.

    In order to do that you need to go to Customizer -> Additional CSS and paste the below code there :

    @media (max-width: 768px)
.home:not(.blog) .page-header {
    display: none;
}

    Thank you and have an amazing day!

    Thread Starter kaitlyn_

    (@kaitlyn_)

    For clarity, I don’t care about the parallax animation effect.

    I’m using Parallax because it lets me have a 2-layer image in the Big Header Section.

    What I’m hoping for help with is —–>> How to target the top layer of the Big Header Section image with CSS. So I can make it always fully visible <<——

    Thanks ??

    Mat

    (@mateithemeisle)

    Hello @kaitlyn_ ,

    In order to do that you would need some custom code which usually is beyond our scope here. Nevertheless, I made a test with the below code and it seems to be working ok.

    @media only screen and (max-width: 768px) {
.carousel #parallax_move .layer2 {
    position: absolute;
    top: 0;
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 700px 500px;
}

    Please let us know if this works for you!

    Thank you and have an amazing day!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Scale top parallax layer in “big title section”’ is closed to new replies.