Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1367042

    On my site – I have a section labelled “WHAT IF YOU NO LONGER DREADED MONDAYS?” I am trying to add Background Image with Color Overlay. How can I achieve that?

    Mockup – https://ibb.co/8PLB5T2

    Live site – https://gideonfranchise.flywheelsites.com/

    #1367175

    I switch it to a regular color section which works but I an unable to add the top bar which is labelled “WHAT IF YOU NO LONGER DREADED MONDAYS?”

    screenshot – https://ibb.co/vPRQWv4

    1- How do I add a background bar behind it?
    2- How do I make it extend all the way to far left of the screen like my mockup?

    #1367347

    Just an update

    I was able to pretty much solve most of it I just need help with one thing

    Screenshot – https://ibb.co/8D4ZytZ

    How do I make it extend all the way to far left of the screen like my mockup?

    Mockup – https://ibb.co/8PLB5T2

    Live site – https://gideonfranchise.flywheelsites.com/

    #1367582

    Hi Navin,

    Sorry for the late reply!

    I added following code to Quick CSS field

    
    /* Extended BG */ 
    .av-special-heading.headerCustomBG::before {
      background: #C0FBFE;
      content: '';
      height: 83px;
      width: 100%;
      position: absolute;
      top: 0;
      left: -100%;
    }
    

    Please review your website :)

    Best regards,
    Yigit

    #1368072

    Thank you

    That looks great

    I need help with one last thing please

    I am trying to create a similar block on another page.

    Mockup – https://ibb.co/W5Nr8j8

    My block – https://gideonfranchise.flywheelsites.com/?page_id=268 – located towards the middle of the page and labelled above “Starting a learning center can feel overwhelming”

    How can I make it look like my mockup?
    1- The background colors should extend all the sides (like mockup)
    2- Header should extended to the left with white background (similar to what we did above)

    Thank you so much in advance.

    Thanks

    #1368423

    Hi,

    I adjusted the paddings and margins in the cell and then added following code to bottom of Quick CSS field

    
    /* Support cell padding */
    .support-cell .av-special-heading {
      padding: 30px;
    }
    
    .support-cell .av-subheading p:last-child {
      padding-bottom: 30px;
    }
    
    #top .support-cell .av-special-heading-tag {
      background-color: white;
      width: fit-content;
      padding: 10px 10px 10px 0;
      left: -50px;
      position: relative;
      text-indent: 50px;
      margin-bottom: 20px;
    }
    

    Please review your website :)
    Best regards,
    Yigit

    #1372590

    I need one final help with this and then we can close it out

    On mobile
    1- there is a pierce missing on the left side
    2- increase the header background to the right a little more

    Live site – https://gideonfranchise.com/

    Mockup
    315494517-655991296179102-6190871813938712103-n

    how can i fix this for mobile? (desktop is perfect)

    • This reply was modified 2 years, 1 month ago by navindesigns.
    #1372598

    Hi navindesigns,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    .headerCustomBG {
        min-width: 740px;
        height: 103px;
    }
    
    @media only screen and (max-width:980px) {
      .headerCustomBG {
        min-width: 100%;
      }
    }
    
    @media only screen and (max-width:640px) {
      .headerCustomBG {
        padding-top: 30px;
      }
    }

    Hope it helps.

    Best regards,
    Nikko

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