Home / Forums / You Theme Support / Responsive image headers on mobile

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

  • MikalaMarie
    Participant

    Hello!

    Images don’t seem to be shrinking as well as they could for mobile when using Visual Composer and setting a background image for a row. Here are a couple of examples of what images look like on mobile for corpuzfamilydentistry.com:

    Desktop vs. Mobile:

    Photos are sized to 1600×1067. Visual Composer settings:

    • Stretch Row
    • Row Height: 100%

    Is there a fix for this? Is there anything I can do on my end to make more of a photo visible on mobile? Perhaps you can recommend a specific image size. Or is this just an issue that will occur when using photographs regardless and are vs textures/backgrounds?

    Thanks!!!

    Hi @mikalamarie

    Can you send over your login credentials so we can check on this further from our end?

    Regards,


    MikalaMarie
    Participant
    This reply has been marked as private.

    Hi @mikalamarie

    The image is a background image, so it is meant to cover the dimension of the row based on height.

    This is why the image looked cropped on mobile since the image is trying to cover the height of the row, then clipping the width of the images.

    I added a class to the rown then added a CSS to adjust the min-height for the row on smaller mobile devices so that the image will only need to fill that space and there will not be too much portion of the image clipped.

    Can you please check if http://www.corpuzfamilydentistry.com/reviews/ and http://www.corpuzfamilydentistry.com/about/ looks good from your end?

    Thanks!


    MikalaMarie
    Participant

    Makes perfect sense. Thank you so much for this fix! I will apply to the remaining pages. You guys are awesome with customer support.

    You’re welcome, @mikalamarie

    Please don’t hesitate to contact us back if you encounter any issues.

    Regards,


    Merkmonster
    Participant

    Hi! Same problem over here… could you guys please share the css and class-name you added? Thanks!

    Hi @merkmonster

    You can add any CSS class name to the row you plan to apply this fix on. For the site above, we used “top-page-banner-image” as the class name.

    You then need to copy and paste this CSS into Theme Options > Customize>

    @media screen and (max-width: 768px) {
    .top-page-banner-image {
        min-height: 300px !important;
    }
    }

    Replace the class to the class name you will use.

    Regards,

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.