Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 14, 2016 at 10:47 am #632330
    Snowgaard

    Hi

    I am having problem with a background picture in Color Section depending on which media/platform I’m viewing the webpage on.

    I you take a look at http://www.bcreative.dk you can see a person standing on the left. If I view the page on a iPad the text is placed on the picture. If I view it on an iPhone the person almost disappear to the right of the screen.

    I have tried all settings under Section Background but without success.

    Is there any way to make sure the background picture isn’t placed below the text?

    Best regards
    Esben

    May 17, 2016 at 5:36 am #633464
    Ismael

    Hey Snowgaard,

    Thank you for using Enfold.

    If the background repeat is set to “Strectch to Fit”, the background size property is set to “cover”. Definition of the “cover” value here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

    One solution is to adjust the background position on different screen sizes with css media queries:

    @media only screen and (max-width: 767px) {
#av_section_1 .av-parallax-inner {
    background-position: 10% 30% !important;
}
}

    Another is to adjust the position of the caption or text:

    #av_section_1 .flex_column.av_three_fourth.flex_column_div.av-zero-column-padding.avia-builder-el-3.el_after_av_one_fourth.avia-builder-el-last {
    top: 200px;
}

    Turn on the custom css class field so that you can define a unique class attribute for the column containing the text: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

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