Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 30, 2022 at 4:22 am #1367042
    navindesigns

    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/

    October 1, 2022 at 5:48 am #1367175
    navindesigns

    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?

    October 2, 2022 at 9:28 pm #1367347
    navindesigns

    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/

    October 4, 2022 at 4:48 pm #1367582
    Yigit

    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

    October 8, 2022 at 5:42 pm #1368072
    navindesigns

    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

    October 11, 2022 at 1:19 pm #1368423
    Yigit

    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

    November 15, 2022 at 4:11 am #1372590
    navindesigns

    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)

    November 15, 2022 at 6:19 am #1372598
    Nikko

    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

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