Bad overlay position in mobile

  • aclouis

    (@aclouis)


    10 years, 2 months ago

    Hi,

    I’m using this plugin to display a featured image behind my post titles. For some reason, the overlay element displays incorrectly after loading the page for the second time. Here’s the site

    To reproduce the issue, follow the following steps:

    • Open the page in Chrome and start debug mode by pressing F12.
    • Click on the “device mode” button in the dev console.
    • Select “iPhone 6 Plus” from the device resolution list
    • Reload

    https://wordpress.org/plugins/display-featured-image-genesis/

Viewing 1 replies (of 1 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    10 years, 2 months ago

    It looks like you may want to adjust your styling a bit–between the extra headline and the large font, the text really has nowhere to go except under your header element, which is what I’m assuming you are referring to. If you adjust the bottom margin under the headline, for example, that would help–it’s currently at 70px. For mobile devices, you might set it to a smaller number.

    It also looks like you have set the height setting fairly high–looks like it’s at 250. Usually, this might be fine, but with the extra text, it becomes problematic. This is removing 250px from the height of the featured image element, regardless of the size of the screen, so on smaller screens, that’s a lot of real estate. If I want to significantly constrain the size of that element, I usually recommend targeting it with CSS, rather than turning that number up very high.

    If there is another issue that you’re seeing instead, my apologies, but that’s my guess based on what I’m seeing there. Hope this helps you get started.

Viewing 1 replies (of 1 total)

The topic ‘Bad overlay position in mobile’ is closed to new replies.