Form on phone looks different

  • Profile Image
    phoenixsignaturekitchen
    Asked on June 09, 2020 at 12:06 AM

    Background not showing on phone

    Screenshot
  • Profile Image
    EltonCris
    Answered on June 09, 2020 at 04:10 AM

    It is due to the background-position and the background-size property which is placed at the center and the size is expanded. This works perfectly fine on desktop but definitely not looking good on mobile.

    If you want the background image to stay at the stop and keep its aspect ratio, you can inject this CSS code to your form.

    @media screen and (max-width:480px){

    .supernova {   

    background-position: 0 0 !important;

    background-size: 100% !important;

    }}

    Guide: How to Inject Custom CSS Codes

    Result:


  • Profile Image
    phoenixsignaturekitchen
    Answered on June 09, 2020 at 04:28 AM
    Thanks for your suggestion. I have input the css code according to the guide you sent but after doing so, rotating my phone to landscape mode, the background disappears again as seen in attached.
    [Image.jpeg]
    ________________________________
    ...
  • Profile Image
    Bojan_J
    Answered on June 09, 2020 at 07:20 AM

    Greetings and thank you for your message.

    Unfortunately, we are not able to see your attached screenshot. Please click here to see how to attach images.

    I have tested your form on multiple devices, and I was able to see the background image on all of them:

    Can you please try to open your form in incognito window, so the form cache is cleared? If this does not help, please let us know what device are you using so we can make a test on a specific device?

    Thank you for your cooperation. 

  • Profile Image
    phoenixsignaturekitchen
    Answered on June 10, 2020 at 05:07 AM

    I am using an iPhone XR. Pls see the attached. This was taken on my phone using Chrome incognito window. Thanks.1591779987WhatsApp Image 2020-06-10 at 5

  • Profile Image
    Bojan_J
    Answered on June 10, 2020 at 06:50 AM

    Thank you for your reply.

    I have tested the form in iPhone XR, and I was able to replicate the problem. To resolve it, please add the following CSS:

    @media screen and (orientation:landscape){
        .supernova {
            background-position : 0 0 !important;
            background-size : 100% !important;
        }
    }

    Please add the provided CSS below the one my colleague has provided to you. You need to have both. You can click here to see how to inject CSS.

    Let us know if this solution works for you.

  • Profile Image
    phoenixsignaturekitchen
    Answered on June 16, 2020 at 11:36 PM

     Thanks so much for all your help. I don't know why the circled section in the attached screenshot isn't 'transparent' in order for the background to show.1592364949Weekly Menu 186 - 246-1.png

  • Profile Image
    EltonCris
    Answered on June 17, 2020 at 02:22 AM

    It is actually semi-transparent but the background image was resized proportionally so it does not contain the entire screen.

    If you want it to look like this;

    Change the background-size value found in the CSS code from 100% to cover. Example:

    background-size: cover !important;