Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 27, 2018 at 9:53 am #1015198
    philthebass

    Hi,

    Can anyone suggest the best way to achieve this wave effect on a footer by editing the Enfold CSS

    Waves

    I’m currently using a colour section with an image background set to scroll and scale to fit and have added this CSS

    #waves-footer {
    margin-top: 0px;
    z-index: 12 !important;
    position: relative;
    height: 80px !important;
background-position: !important;
}

    This is fine but I want to apply this to all pages and posts, so to do it using CSS in the footer code makes more sense.

    Can anyone point me in the right direction?

    Thanks

    Phil

    September 27, 2018 at 3:48 pm #1015344
    Victoria

    Hey philthebass,

    Can you please upload the screenshot to a service like Dropbox and give us the link here.

    We don’t see the one you added above
    Image 2018-09-27 at 16.48.40.png

    Best regards,
    Victoria

    September 27, 2018 at 3:50 pm #1015347
    philthebass

    Hi,

    Try this

    https://content.screencast.com/users/PhilEvans1/folders/Snagit/media/5c26c0c1-e2c2-4a78-9baf-666ff08e822f/2018-09-27_08-40-51.png

    Regards

    September 27, 2018 at 6:45 pm #1015441
    Guenni007

    but what is wrong with your solution?
    (by the way – posting a screenshot with E-Mail of the domain ? …
    Personally, I think it’s bullshit to cover everything up anyway – and judging something on a live site is always better .

    September 27, 2018 at 6:56 pm #1015449
    Victoria

    Hi philthebass,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    September 27, 2018 at 7:52 pm #1015486
    philthebass
    This reply has been marked as private.
    September 27, 2018 at 8:14 pm #1015498
    Victoria

    Hi Phil,

    Well, you can remove the waves div and try this css, but this might not be the optimal or responsive solution.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    

#footer {
    background-repeat: no-repeat;
    background-image: url('https://www.impactmh.org.uk/wp-content/uploads/2018/09/Blck-Waves-Footer.png') !important;
    background-attachment: scroll;
    background-position: top left;
    background-color: transparent;
    padding-top: 80px;
    border-top:none;
    margin-top: 100px;
}
#footer .container {
    background-color: #222;
    padding: 20px 100px;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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