Feed overlaping footer on mobile

  • Resolved medici

    (@medici)


    9 months, 3 weeks ago

    Hi there,

    I am having an issue with the Spotlight feed. When viewed on desktop and tablet, it works as expected. However, when I view the feed on mobile, it collides with the footer beneath it.

    I came across a similar problem on the support forum here where you recommended adding this to the feed:

    selector {
    inline-size: inherit;
    }

    Unfortunately this has not fixed the problem for me.

    Can you please help me figure out how to fix this.

    Many thanks!

    Luke

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Hendra Setiawan

    (@hendcorp)

    Hi @medici

    Upon checking, I can’t see any issues with your feed; it doesn’t collide with the footer. Please refer to this screenshot.

    Could you please take a screenshot from your end?

    Thank you! I look forward to hearing back from you soon.

    Thread Starter medici

    (@medici)

    Hi Hendra,

    Thank you for your response.

    I have checked it on my phone and on my computer, and I’ve also changed the dimensions in devtools, and it overlaps in all cases.

    Example 1
    Example 2
    Example 3

    Even in your screenshot the padding beneath the feed is incorrect.

    Please try it with different mobile screen widths.

    Many thanks for your help.

    Luke

    Plugin Support Hendra Setiawan

    (@hendcorp)

    Hi @medici,

    Thank you for sharing the screenshots! We’re currently investigating the issue.

    Thread Starter medici

    (@medici)

    Thank you. Please let me know if you require access to the website to help troubleshoot. I also have noticed this happening on other websites I have built.

    Best regards,

    Luke

    Plugin Support Hendra Setiawan

    (@hendcorp)

    Hi @medici,

    Upon checking, I found that your issue is similar to this. You have a?div?element with the class?e-con-inner?that is using CSS flex to set the layout for the page, and this is causing some sizing issues.

    In your specific case, you need to add the following CSS code to your Shortcode widget in Elementor:

    selector {
        inline-size: inherit;
    }

    You can add this code by selecting the Shortcode widget in Elementor > click on Advanced tab > Custom CSS.

    Please let me know how that goes.

    Thread Starter medici

    (@medici)

    Hi Hendra,

    Thanks for your response.

    If you look at my very first post, you will see that I’ve already tried that and unfortunately, it didn’t work.

    To double-check, I have just added the CSS snippet to the Shortcode widget, and the issue persists. I’ve left the CSS for you to inspect if it helps.

    Screenshot attached.

    Please let me know if you see I’ve made a mistake.

    Many thanks!
    Luke

    Plugin Support Hendra Setiawan

    (@hendcorp)

    Hi Luke,

    Thank you for trying! Could you please also add this CSS Code?

    selector {
    flex-wrap: nowrap;
}

    Please make sure to target this specific container. It solved the problem on my end. Please try it on your end and let me know how that goes.

    Thank you!

    Thread Starter medici

    (@medici)

    Hi Hendra,

    Yes this fixes the problem for me too.

    Thank you for your patience and support!

    All the best,

    Luke

    Plugin Support Hendra Setiawan

    (@hendcorp)

    Hi Luke,

    I’m glad to hear that the solution worked for you as well!

    Thank you for your kind words and patience throughout the process. If you have a moment, would you consider leaving us a review? It only takes a minute, but it means the world to us.

    Regards,
    Hendra

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Feed overlaping footer on mobile’ is closed to new replies.