Responsive Design doesn’t work on pages with featured images

  • Hi there! There seems to be a difficulty in the CSS Styles for pages using featured images.

    I am using “The Event Calcender” Plugin. It works fine but on a detailed event page an additional bar appeared and covered half of the menu line.

    I resolved that issue updating the class .content-wrapper.with-featured-image. I did change the margins from -4.7 em (standard) to -2.7.

    Now there is a second issue, similar. It concerns the responsive Design. On some pages – any of them is using the “Standardtemplate” – the content will not appear within the whole width of the page on a smartphone. I first thought that concerns only those pages with a featured image. But than I found out that it is similar on some pages without an image:

    Reduced width
    Featured Image: https://www.ivepa.at/fachwissen/
    No Image: https://www.ivepa.at/hygiene/

    Whole width: https://www.ivepa.at/satzung/

    Using a featured image, the responsive design should keep the image on top but the content below, without any border around the image. But no idea about the difference on the pages “sating” and “hygiene” not using a featured image.

    Thanks for helping!

    With kind regards,

    Matthias

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

Viewing 1 replies (of 1 total)

  • Hello Matthias,

    The page at https://www.ivepa.at/hygiene/ is behaving as if it has a featured image set, and if I look in the browser inspector, it’s loading a div with the hero class, which only happens if there’s a featured image.

    Did you ever have a featured image active on that page? Try adding a featured image, update the page, then remove it and update it again to see if that makes any difference. You could also try clearing your site’s cache.

    As for the page with a featured image, https://www.ivepa.at/fachwissen/, that should be showing the post in full-width on mobile – if I publish a page on a test site with that theme active and add a featured image, the text still displays full-width on mobile, and it only overlaps the featured image on desktop.

    I also only see the issue when viewing the site in landscape mode on my phone, so it appears this only happens above a certain screen width.

    You mention updating some of the theme’s CSS. Did you edit the style.css file directly, or did you add this as additional CSS in the Customizer? Can you check if removing that CSS code changes how https://www.ivepa.at/fachwissen/ looks on mobile, or else are you willing to share the full CSS code here so I can try and replicate the issue on my end?

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive Design doesn’t work on pages with featured images’ is closed to new replies.