Custom CSS Fix for Mobile

I have a Divi theme installed on my site. There is a white section in mobile. How do I get it fixed? Please see the image.

  • Abdul Wajed
    • Staff

    Hi Manjeet Singh,

    I hope you are well today. :slight_smile:

    I just checked your site in both Android and iOS but I could not find the issue (See the screenshot). Does this mean that you have managed to deal with the issue meanwhile or am I missing some details here? How can I see this issue? And I can provide the solution if I can see the issue and inspect those elements. Let me know, please.

    Have a nice day.
    Best regards,
    Wajed

  • Manjeet Singh
    • Flash Drive

    Hi Wajed

    Thank you for your reply. I could still see the CSS problem with my mobile (iPhone 7 plus). There is a white space on the right hand side of the screen. Attached the screenshot for your reference.

    Looking forward to your reply.

    Thank you

    Regards.

  • Oguz
    • QA Engineer

    Hey Manjeet Singh ,

    How are you doing today?

    I can see your problem. It's happening because your images 400px wide, iPhone 7 plus is 414px wide. So there is 14px empty space because of that. I can offer two types of solution. First, you can update your images with 414px versions. Or you can use this CSS code to make images 414px wide. You should put these codes to your custom CSS panel. But don't forget CSS solution may cause an image quality issue.

    @media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (orientation : portrait) {
      .et_portfolio_image img{
        width:100% !important;
      }
     }

    Hope that can help you.
    Cheers!
    Oguz

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.