Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #628031

    So I am creating borders around some of our special headings throughout the site. On Mobile it looks great.

    However on desktop and laptop there is extra space on the right and left because it is spanning the entire section it is in.
    You can see this best on srea.co/services/

    I would like the boxes to be a bit more flush to the text instead of spanning the div. I did try to create a div inside and it still spanned.

    Here is my css for the two types of boxes:

    div .heading-border{
    border-style: solid; 
    border-width:2px; 
    padding: 5px;
    border-color: #666666;
    }
    
    div .heading-border2{
    border-style: solid; 
    border-width:2px; 
    padding: 5px;
    border-color: #FFFFFF;
    }

    Thanks for any suggestions you can provide

    • This topic was modified 4 years, 1 month ago by  evan_friedl.
    #629217

    Hey evan_friedl,

    Please try wrapping your text inside a span with custom CSS class as following

    <span class="my-custom-class">Here is my text</span>

    then add following code to Quick CSS

    .my-custom-class { 
    border-style: solid; 
    border-width:2px; 
    padding: 5px;
    border-color: #666666;
    }

    Best regards,
    Yigit

    #629454

    Thank you very much this was perfect!

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Special Headings and CSS Borders’ is closed to new replies.