Why isn't Upfront images responsive?

I am still using Upfront on this client's website but the image in the header is not responsive. Can someone help me understand why the image is getting cut off when it's on a mobile device? Why isn't the image responsive?

  • Sajid

    Hi, Julius! Welcome back :slight_smile:

    I am sorry I can not replicate the issue of header extra height with blue bg and button being cut off, on simulator and also on my smartphone (windows). See screenshot here.

    For background image of header. Browser automatically resize from centre(in our case), left or right and adjust according to the screen resolution.

    To overcome this issue we have two methods:

    1. You can edit the image in photo editor software (PhotoShop) and position the man image in centre of canvas manually and upload again.

    2. You can set different background image for different screen sizes (really!) by going to responsive mode and selecting the break point. In our case select mobile (315px), select edit background by clicking on pencil icon, now click on gear icon, pick image (should be portrait view) and save changes. See screencast below.

    This is one of awesome features of upfront framework that I like personally :slight_smile:

    Hope this will help :slight_smile:

    Kind Regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.