Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #776829

    Greetings, I am actually the account holder’s web designer. This is in regard to a website I am developing using a child theme of the Enfold theme (URL included in the private content field).

    My client discovered the the background images in the 3 1/3 boxes display inconsistently in the “Our Menu of Services” section. Specifically, the background image shifts upward into the box’s headline in the first two boxes but display’s correctly on the 3rd box. See example:

    Incorrect position of background image on 1/3 column row

    Each box is using the same settings:

    • The row settings in the first column are set to “Equal Height.”
    • Vertical Alignment” is set to “Top.”
    • “Space between columns” is set for space.
    • Individual boxes have their padding set to 0px (all sides).
    • Border radius (all 4 corners) on all 3 columns is set to 18px
    • The same image is used as a background image for all 3 boxes
    • No animations are set.
    • On the mobile view, the “Mobile display” is set to “Always display.”

    While I have your attention, I am trying to understand why the corner radius isn’t applying to the last 1/3 box in the “Happy Customers” section.

    #777085

    Hey ChrisLoynd,

    That is because you have more content in the last element, so you would have to target the elements individually to get it to display the way you want.

    Best regards,
    Rikard

    #777326

    Thanks Rikard, I was assuming that because each box in the row is set to equal height, the background image should fall in the same place in each box.

    For example, why is the background image position correct in the desktop view but not in the mobile view?

    #777655

    Hi,

    You could try activating the custom CSS field for builder elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Assign the elements in question a class like your-class, then you can try CSS like this in Quick CSS:

    @media only screen and (max-width: 767px) {
    .your-class {
      min-height:180px; 
    }
    }

    Best regards,
    Rikard

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.