Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 27, 2015 at 9:50 pm #525814
    ewakkuri

    I am updating my Enfold site and I would like to include a more customize cover image with text.

    Wondering if the theme comes with the right tools to be able to do this?

    Key features:

    Image backdrop
    Actual text caption on top of the full width image
    Call to action button would be nice (Contact Us Today!) linking to another page.
    Colored full width bar on the bottom that says Call Us Today At 555-555-5555

    I played around with different boxes and media elements and haven’t been able to get this to work. If this requires custom coding, I understand, I just want to double check with you on if there are features in the theme that can get me most of the way there.

    • This topic was modified 8 years, 5 months ago by ewakkuri.
    October 28, 2015 at 5:22 pm #526305
    Yigit

    Hey ewakkuri!

    Please add a color section element to your page and then set a custom background to it and add your elements inside it :)

    Cheers!
    Yigit

    October 28, 2015 at 6:55 pm #526348
    ewakkuri

    Ok I did that, but when I try to make the color section smaller for the contact us area with the phone number, it stays too larger vertically and doesn’t naturally center the text vertically as well. I had to use a whitespace sperator to drop the text in it which will work.

    For the height of the color section I tried adding a quick CSS code to shrink the color section to 50px, but the problem is the site no longer scales well to smaller resolutions. What would be the best way to handle this?

    October 28, 2015 at 7:02 pm #526353
    ewakkuri

    This is what I used for quick CSS which works when the website was viewed full screen, but as the window shrunk it did not dymanically scal and so ultimately it didn’t work.

    #color-section-test{
    min-height: 50px;
    height: 50px;
    }

    October 30, 2015 at 8:27 pm #527680
    Andy

    Hi!

    wrap your code using media queries. Something like this: 

    @media only screen and (max-device-width: 736px) {
#color-section-test{
min-height: 50px;
height: 50px;
}}

    and adjust as needed.

    Cheers!
    Andy

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