Cover template featured images cropped on smartphone screens

  • Resolved jastra

    (@jastra)


    2 years, 2 months ago

    I have two issues with how images in the Chaplin theme display on smartphone screens. I suspect css can fix this but I can’t find it anywhere.

    The website is in final stages of development.

    1.) Cover template images on smartphones only display the center 1/3 of the image. On a tablet only the center 2/3 is displayed.

    Is there any additional CSS I can add to fix this particular issue?

    2.) When images are in a 2-column format they get jumbled. Example: In block 1 the image is in the left column of two and the text is in the right column. Then below, in block 2, the image is in the right column and the text in the left column. Then this format alternates on down the page in successive blocks.

    See this page.
    https://sevenspringsfarm.organic/meet-the-team/

    I can see “code-wise” why this happens. But is there any additional CSS that can fix this issue? Or do I need to go to blocks where I wrap text around the images and alternate left-right that way?

    Thanks for your help. I love this theme!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter jastra

    (@jastra)

    2 years, 2 months ago

    Update on paragraph 2) above: I reformatted the page to use text wrapped around the images. It works perfectly on mobile screens now.

    Theme Author Anders Norén

    (@anlino)

    2 years, 2 months ago

    Hi @jastra,

    Regarding your first issue, the hero of the cover template is always resized to fill the entire screen, which means that the image needs to be cropped dynamically to make sure that the background image covers the entire hero section.

    If you want the entire image always be visible, you can add the following CSS to Appearance → Customize → Additional CSS:

    .cover-header.bg-image { background-size: contain; }

    This will contain the image in the center of the hero, and the areas not covered by the image will be white.

    — Anders

    Thread Starter jastra

    (@jastra)

    2 years, 2 months ago

    Got it. Thanks Anders for the quick reply.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Cover template featured images cropped on smartphone screens’ is closed to new replies.