Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 9, 2016 at 10:20 am #595429
    Eline

    Good morning,
    On the website I’m making I have a problem with text which is not responding in the same way as the box where the text is written in. So when so make the screen larger the text gets to big.
    The text in the grey area, which starts with “Onze producten zijn te vinden…”, doesn’t stay in the grey area when the screen gets larger. The text should always remain in this area (text block), whether it’s big or small screen. Is that possible?

    I tried it with this:
    .page-id-3596 #av-layout-grid-2 .flex_column {
    background-size: cover;
    }

    That worked for the home page, but same problem is on other pages. Is there another way that i can build a colored text box, which functions like this. Maybe I didn’t do in the right way. If there is. please let me know.

    Here two screenshots from the page http://www.meander-bv.nl/collecties/

    • This topic was modified 8 years, 1 month ago by Eline.
    March 10, 2016 at 5:48 pm #596413
    Jordan

    Hey Eline!

    If the above code you tried is working then it should work for the other pages as well and not just the homepage. Therefore you need to remove the page id from the CSS code because that id is only for one page. So remove .page-id-3596 and you should be left with:

    #av-layout-grid-2 .flex_column {
background-size: cover;
}

    Let me know if that works.

    Best regards,
    Jordan

    April 26, 2016 at 5:49 pm #622351
    Eline

    Hello Jordan,

    Sorry for my late response, but the project was resceduled and now I am back again.

    I tried it, but didn’t work and i keep the same problem, when I make the screen smaller or bigger it looks not nice. Would you please have a closer look? Hope you can help me with this.

    Best wishes, Eline

    April 29, 2016 at 12:51 pm #624341
    Ismael

    Hi,

    Adding an image with a static dimension will not work well as responsive background image specially when the width of the container is percentage base such as columns. Remove the image background image then replicate it using css. This should work:

    .flex_cell.no_margin.av_one_third.avia-builder-el-4.el_after_av_cell_two_third.avia-builder-el-last.av-zero-padding {
    background: white;
    border: 20px solid gray;
}

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

    Best regards,
    Ismael

    April 29, 2016 at 4:52 pm #624646
    Eline

    Hi Ismael,

    I have done what you said and turned on the custom css class field, but it is not working.

    What should i put in front of the code is it okay like this?

    .section1.flex_cell.no_margin.av_one_third.avia-builder-el-4.el_after_av_cell_two_third.avia-builder-el-last.av-zero-padding {
    background: white;
    border: 20px solid gray;
    }

    and than in the custom css class field: section1

    Because this didn’t work. I tried also with a # or without, but no succes.

    Best wishes, Eline

    May 3, 2016 at 3:13 am #626117
    Ismael

    Hi,

    Where did you add the custom class attribute? You should apply it in the column element. If you applied “section1” as the custom class attribute, you have to change the css code to something like the following: 

    .section1 {
background: white;
border: 20px solid gray;
}

    Best regards,
    Ismael

    May 10, 2016 at 5:02 pm #630103
    Eline

    Hi Ismael,
    Thanks for your support and solutions, but I tried what you said, but didn’t work. I found another solution, I changed the layout. There is an portfolio grid which came close to what i wanted to present (1 column side by side). so I have taken that one and it looks great now.
    Thanks again for all your help.

    Best, Eline

    May 12, 2016 at 7:52 am #631178
    Ismael

    Hi,

    I see. Glad that you sorted it out with another element. :)

    Best regards,
    Ismael

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