Tagged: , , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 6, 2016 at 12:39 am #628031
    evan_friedl

    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 7 years, 11 months ago by evan_friedl.
    May 9, 2016 at 2:15 pm #629217
    Yigit

    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

    May 9, 2016 at 8:09 pm #629454
    evan_friedl

    Thank you very much this was perfect!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Special Headings and CSS Borders’ is closed to new replies.