[Resolved] Increase image size in mobile

Home Forums Support Increase image size in mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1321466
    Janani

    Dear Team

    1. There is a full length image that I kept as a section, which appears half-way through the page ( a child picking up a leaf). But this image appears small when we view it on a mobile. Is it possible to increase the image size for mobile? I don’t see any customization option in the section, hence just thought will check with you.
    2. And just to confirm, typography size can be changed only for H1 & H2 in mobile – is that right? The other typography size will remain the same across devices?

    Warm regards,

    #1321754
    David
    Staff
    Customer Support

    Hi there,

    1. edit the Section and in the Custom Classes field add mobile-height
    Then add this CSS:

    @media(max-width: 768px) {
        .mobile-height {
            min-height: 360px;
        }
    }

    2. Thats correct. The others require CSS if needed.

    #1322922
    Janani

    Thanks David. I tried this, but at the height of 360 px, the entire image does not appear on screen. So i reduced the height to 200 px. There is no way I can reduce the width so that the entire image appears on screen?

    Warm regards,

    #1323157
    David
    Staff
    Customer Support

    You don’t need the CSS provided above – as your section has a total of 38% vertical padding ( top + bottom ) which matches the images aspect ratio. So it should be displaying all of the image.

    #1324412
    Janani

    Dear David

    When I remove the CSS, the image appears too small. When I give the CSS and adjust the image height to 200px, the image appears a little bigger and the entire image appears om screen. If I give the height at 360px, only half of the image appears on screen. Is there a way to make it more bigger with the entire image on screen, or is this the maximum possible?

    Warm regards,

    #1324815
    David
    Staff
    Customer Support

    The only way to display 100% of the image is to use the 38% padding method.
    This keeps the image responsive, and will always display the full height and full width of the image regardless of the screens size.

    Increasing the height of the container will only lead to cropping of the image.

    #1325758
    Janani

    Dear David,
    Thanks. This is resolved.

    #1326075
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.