Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 12, 2017 at 5:49 pm #776829
    ChrisLoynd

    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.

    April 13, 2017 at 7:46 am #777085
    Rikard

    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

    April 13, 2017 at 3:10 pm #777326
    ChrisLoynd

    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?

    April 14, 2017 at 6:32 am #777655
    Rikard

    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

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