Portfolio Images Hidden Behind Lower Area. Resizing Browser Fixes It

  • Version Info
    WordPress – 4.9.8
    OceanWP (free) – 1.5.22
    OceanWP Portfolio – 1.1.4
    Elementor (free) – 2.1.6

    Summary
    The portfolio images often load behind the section on below it (see screenshot). If I resize the browser the images display properly.

    Details
    I will be displaying the portfolio in two areas: the home page (via shortcode) and the portfolio page (www.laurenrothra.com/portfolio, the page is saved as a portfolio template). This problem occurs on both pages.

    I’m not sure if this is an Elementor or OceanWP issue, but I think the problem lies in the theme.

    I looked into the source code and css via Chrome DevTools and noticed that the class portfolio-wrap seems to use dynamic sizing, but it doesn’t always push the content down (see screenshots below). I could force the section to have a minimum height, but that wouldn’t exactly work well for various screen sizes: too much height and too much white space on smaller screens, to little height and it cuts off the images on larger screens.

    Class size with images covered
    Class size displaying correctly

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter jrothra

    (@jrothra)

    @wpwebsolution –

    Okay… sooooo, what is the fix?

    Thread Starter jrothra

    (@jrothra)

    @wpwebsolution –
    I kinda concluded something like that, but because I can’t figure out what to put without negatively impacting the theme/Elementor, I asked for help here. I’m glad you agree it’s fixable via CSS, but I’m afraid your answer isn’t very helpful. ?? If you’d be more specific that would be helpful.

    • This reply was modified 6 years, 7 months ago by jrothra.
    Thread Starter jrothra

    (@jrothra)

    Too much space above and below. I have it set at 5% padding, but it looks like what you did sets a min-height for that area.

    • This reply was modified 6 years, 7 months ago by jrothra.
    Thread Starter jrothra

    (@jrothra)

    @wpwebsolution –

    You really need to be more specific. What CSS did you use? Pixels? Em? VH? Min/max height? So far you’ve pretty much just told me “fix it via css.” ??

    • This reply was modified 6 years, 7 months ago by jrothra.
    Thread Starter jrothra

    (@jrothra)

    @wpwebsolution –

    Really? You sent me an email based on this thread soliciting me to be a client? This makes me feel like you’re lack of clarity was intentional so you could troll the forum for customers. I’m not sure if that’s a violation of the rules, but it should be.

    • This reply was modified 6 years, 7 months ago by jrothra.
    Theme Author oceanwp

    (@oceanwp)

    Hello @jrothra, can you try this css code and tell me if it solves the issue?

    .portfolio-wrap {
    min-height: 460px;
}
    Thread Starter jrothra

    (@jrothra)

    @oceanwp –

    That works, sort of. It creates a bunch of extra white space below the masonry images that on my 17″ laptop is unappealing (at least to me).

    I took screen shots to show it.

    Min Height Added
    No Min Height (it initially had the images behind the red area, so to “fix” the problem, I shrank the browser’s size, then put it back to full size)

    Thread Starter jrothra

    (@jrothra)

    @oceanwp –

    I’m using Elementor, so I’m wondering if it’s not related to that, too.

    Thread Starter jrothra

    (@jrothra)

    Okay, just for giggles (and a test I was confident wouldn’t work, but figured give it a try anyway), I gave the Elementor container (the row) that holds the portfolio a z-index of 100. It moved the pictures on top of the colored area; it didn’t affect height.

    Didn’t think that would work, but tried anyway.

    Thread Starter jrothra

    (@jrothra)

    While trying to determine of this is related to the theme (it’s the free version, which is why I’m posting all this here) or Elementor (free version), I tried removing the red area. The images now bleed over the footer unless I re-size the browser.

    How it looks

    Thread Starter jrothra

    (@jrothra)

    One more question for @oceanwp –

    Could this be an issue with the Portfolio add-on itself? I ask this because, if so, I’ll create a trouble ticket for it since it’s a premium add-on. If it’s not the add-on, then this can stay on this forum.

    Theme Author oceanwp

    (@oceanwp)

    Hello @jrothra, even you have a question or problem with the theme, you can use the premium support, so if I need login details, you will be able to give them to me as no else will see them.
    So, yes, can you create a support ticket and I will check what is wrong.

    Thread Starter jrothra

    (@jrothra)

    I just submitted the trouble ticket.

    Theme Author oceanwp

    (@oceanwp)

    Answered ??

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Portfolio Images Hidden Behind Lower Area. Resizing Browser Fixes It’ is closed to new replies.