Support » Fixing WordPress » How to use CSS to reduce width of box around text

  • Hello,
    I’m not very experienced with CSS, but have managed to figure out how to do most of the things I want with the site I’m launching. One thing I can’t figure out how to do is to reduce the width of this box (see screen shot at https://i.imgur.com/6aahF5n.png). What I’d love is for the box to be as wide as the text, with a little padding. Instead it seems to be full-width. Here’s the custom CSS I’m using. Thanks for any advice you might have!

    .site-branding h1 {
      color: #a09a92;
      font-family: "Overpass";
      font-size: 36px;
      font-size: 3.6rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1;
      margin: 0;
    }
    
    .site-branding a, .site-branding a:hover, .site-branding a:focus, .site-branding a:active {
        color: #ffffff
    }
    
    .menu-toggle .mobile-site-title {
      font-family: "Overpass"; background-color: #015138; border: 2px solid #ffffff;
    border-radius: 6px; padding: 8px
    }
    
    .entry-meta {font-family: "Overpass"; font-style:normal; background-color: #015138; border: 2px solid #ffffff;
    border-radius: 6px; padding: 2px}
    
    .entry-header .entry-meta:before,
    .entry-header .entry-meta:after,
    .title-block .entry-meta:before,
    .title-block .entry-meta:after {
      color: #d9d6d0;
      content: "";
      display: inline-block;
      font-family: libretto-icons;
      font-size: 24px;
      margin: 0 0.25rem;
      text-shadow: none;
      vertical-align: -6px;
    }

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to use CSS to reduce width of box around text’ is closed to new replies.