Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1009140

    Hi there,

    I have a special heading that is awkwardly overlapping a banner image on mobile to where the first word is not very legible. I’d like to shift the word “Unveil,” the subheading, and the button down a bit on mobile only. (See screenshot of the current problem with Unveil being illegible).

    I thought the below code would work since it does using Inspector tools. I added it to custom.css and Quick CSS with no luck. Cleared my cache and it’s not moving anythingl. Any ideas or thoughts on what I might be doing wrong?

    @media only screen and (max-width: 767px) {
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin-bottom: 20px;
    }
    }

    Thank you!

    #1009164

    Hey bbarta28,
    Please try this code in the General Styling > Quick CSS field:

    
    @media only screen and (max-width: 767px) { 
    #top.home #av_section_1 .container .av-content-full {
    padding-bottom: 0px !important;
    }
    #top.home #av_section_1 .container .av-content-full .flex_column_div {
    margin-bottom: -60px !important;
    }
    }

    Please see the screenshot in Private Content area for expected results.
    Please adjust the negative margin-bottom to suit, and clear your browser cache.

    Best regards,
    Mike

    #1009165

    Mike! You are BRILLIANT! This worked. Thank you so much!

    Please feel free to close this thread.

    ~Brianne

    #1009169

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Adjusting Special Heading and Button on Mobile’ is closed to new replies.