Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 2, 2019 at 9:33 pm #1124272
    webworm72

    I want to create a line / separator with text in the middle to span the whole page
    Unfortunately the white space/separator element in the page builder does not give you an option for text, it only allows the use of an icon in the center

    See example site below This is what what the client is looking to do, as you scroll down on page below you will see the example
    for “Give Your Legs The rest They Need” and ” Shop All Products Now”
    https://www.loungedoctor.com/

    I would need to be able adjust the color and size of the font and the line itself as far as width , color and thickness

    I appreciate any thoughts you have on this

    • This topic was modified 5 years, 4 months ago by webworm72.
    August 4, 2019 at 1:43 am #1124442
    Mike

    Hey webworm72,
    Please try this CodePen or this example from CSS Tricks
    Here is an example where the lines are on the sides of an H2 heading, but you will need to change the class “.post-entry-49” to your page class.

    /* lines on sides of H2 in textblock - heading style */
@media only screen and (min-width: 768px) { 
  .post-entry-49 .avia_textblock {
    line-height: 0.5;
    text-align: center;
  }
  .post-entry-49 .avia_textblock h2 {
    display: inline-block;
    position: relative; 
    line-height: 0.2; 
  }
  .post-entry-49 .avia_textblock h2:before,
  .post-entry-49 .avia_textblock h2:after {
    content: "";
    position: absolute;
    height: 5px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    top: 0;
    width: 200%;
  }
  .post-entry-49 .avia_textblock h2:before {
    right: 100%;
    margin-right: 15px;
  }
  .post-entry-49 .avia_textblock h2:after {
    left: 100%;
    margin-left: 15px;
  }
  }
  @media only screen and (max-width: 767px) { 
  .post-entry-49 .avia_textblock {
    line-height: 0.5;
    text-align: center;
  }
  .post-entry-49 .avia_textblock h2 {
    display: inline-block;
    position: relative; 
    line-height: 0.2; 
      padding-top: 0px !important; 
  }
  .post-entry-49 .avia_textblock h2:before,
  .post-entry-49 .avia_textblock h2:after {
    content: "";
    position: absolute;
    height: 5px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    top: 0;
    width: 75%;
  }
  .post-entry-49 .avia_textblock h2:before {
    right: 100%;
    margin-right: 15px;
  }
  .post-entry-49 .avia_textblock h2:after {
    left: 100%;
    margin-left: 15px;
  }
  }

    If you check out the two links above and compare to this css I believe you’ll understand how this works. Otherwise, if you create a test page and give us admin access we can assist further.

    Best regards,
    Mike

    August 9, 2019 at 2:02 am #1126082
    webworm72

    thanks Mike for help , you can close this ticket .

    August 9, 2019 at 7:07 am #1126107
    Mike

    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 in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘how to create a line sperator with text in the middle’ is closed to new replies.