Full-height on desktop, full-width on mobile?

  • Resolved ratmaze

    (@ratmaze)


    4 years, 5 months ago

    I am trying to create a page with a carousel that almost fills the height of the viewport on a desktop, while almost filling the WIDTH of the viewport on a mobile device (like a lightbox, but on the page itself). Am I on a wild goose chase? I can’t find a combination of settings that works in “preview” mode. I have tried adding custom CSS to the block to specify max-height. If I start with a block with columns, I can get the effect I want on the desktop, but not on the mobile preview. I am going in circles.

    I am new to WordPress (w/Astra theme) and Visual Portfolio, so I may be overlooking/misunderstanding something obvious to others. I am working on a local host. Nothing is public yet. I am not certain that the “preview” mode accurately portrays the way that the page will appear in the real world.

    Suggestions?
    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author nK

    (@nko)

    4 years, 5 months ago

    Hey.

    I really need to see what you are trying to achieve, maybe screenshots of what you expect and what you see.

    I think this is a specific task, which most users even not tried to make on their sites 🙂

    Regards, nK.

    Thread Starter ratmaze

    (@ratmaze)

    4 years, 5 months ago

    I don’t see a way to add an image to this post, but I’ll try another explanation:

    I am trying to find the best settings to maximize the size of a carousel for both horizontal and vertical images, while keeping the entire image within the viewport (for desktop, tablet, and mobile).

    Perhaps I just need to make a page live, so I can try it on different devices, rather than using “preview” mode(?).

    Plugin Author nK

    (@nko)

    4 years, 5 months ago

    Hey.

    It is only possible with custom CSS. I have prepared an example of this type of carousel – https://visualportfolio.co/test-fullpage-slider/ , but there is a problem with hover overlay (disabled it on the demo). You will need to add more customizations on your own to make it better for your needs.

    Carousel settings:

    Custom CSS:

    selector .vp-portfolio__item-wrap {
  max-width: 90vw;
  min-width: 90vw;
}
selector .vp-portfolio__item .vp-portfolio__item-img img {
  object-fit: contain;
  margin: 0 auto;
}

    In some cases, preview mode may not work as expected, better to publish your page and look at it on frontend.

    Regards, nK.

    Thread Starter ratmaze

    (@ratmaze)

    4 years, 5 months ago

    Thanks! I will try that.

    Thread Starter ratmaze

    (@ratmaze)

    4 years, 5 months ago

    That looks promising. It is giving the effect I want in the Desktop Preview, but not the other Previews, so, as you say, I will need to publish a page to really know if it is working. The first part of the CSS code is similar to something I tried before, but I didn’t have it quite right.

    In “Layout Items”, I am still a bit confused about the “Item Height” settings, but I think I’ll figure it out with some more experimentation.

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Full-height on desktop, full-width on mobile?’ is closed to new replies.