Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 23, 2018 at 11:28 am #1000682
    akapoun

    Hi!
    On my website I seperate content elements with the diagonal border element.
    At end of my website I use a grid element, underneath there is the contact area, it´s a widget element at footer.
    I want also a diagonal border between these elements.
    How can I set this?

    August 24, 2018 at 12:35 pm #1001175
    Vinay

    Hey akapoun,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
/* CSS - Diagonal Footer border */


/* Footer background */
#footer {
	padding-top:200px;
}
#footer:before {
	content:'';
	position: absolute;
	height:200px;
	left: 0;
	right: 0;
	background: #f8f8f8;
    top: -100px;
   transform:skew(0deg,-5deg);
   -ms-transform:skew(0deg,-10deg);
   -webkit-transform:skew(0deg,-5deg); 
}

    Best regards,
    Vinay

    August 24, 2018 at 6:45 pm #1001340
    akapoun

    Thank you. On landing page it works, but on portolio pages the content gets cut off at the bottom.
    Maybe you can have a look on it.
    I deleted code meanwhile.

    August 25, 2018 at 7:25 am #1001504
    Vinay

    Hi,

    Please feel free to adjust the padding top and height value in the code to suit your design :)

    Best regards,
    Vinay

    August 25, 2018 at 8:11 am #1001515
    akapoun

    I´m sorry, I tried but somethin always doesn´t fit or is cut off, please can you have a look on it.

    August 25, 2018 at 10:44 am #1001558
    Vinay

    Hi,

    Please check the link mentioned in private content area.

    Add a whitespace separator element with 100px height for the portfolio or any other page where content overlaps the diagonal border at the bottom.

    Update the body background color to #f8f8f8 or the diagonal color to white to match the background colors.

    Best regards,
    Vinay

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