Support » Fixing WordPress » Change background of comment area

  • Hello! Running Chrome on Windows 10. If you take a look at the bottom of the post, https://writesofway.org/signs-of-my-times/, you’ll see I’ve managed to make the background of the comments area #FAF9F5, but the margins are non-existent. I’d like them to match that of the post area above, but the only thing that seemed to work was setting a negative margin of something like -51. This works in desktop view but not in mobile view. Any ideas? Thank you!!

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Benjamin Lukoff

    (@lukobe)

    (Here’s a screen shot: https://i.imgur.com/SAZzSKn.png)

    Also happy to paste in the CSS I’ve been using to customize.

    Stef

    (@serafinnyc)

    You have HTML area somewhere. The content area should be beyond the comment form and also I see that your sidebar is below all that and not on the right. So something is messed up in the HTML coding.

    Thread Starter Benjamin Lukoff

    (@lukobe)

    Thanks… that’s part of the theme design that the sidebar isn’t on the right. I haven’t done any custom HTML.. only CSS. This is all I’ve put in:

    .site-branding a,
    .site-branding a:hover,
    .site-branding a:focus,
    .site-branding a:active {
      color: #ffffff;
      font-family: "Overpass";
    }
    
    .posted-on,
    .entry-date {
      color: #ffffff;
      margin: 0 auto !important;
    }
    
    .site-footer,
    .widget,
    .footer-sidebar,
    .widget-block,
    .clear widget-area {
      font-family: "Overpass";
      background-color: #015138;
    }
    
    .entry-title,
    .entry-title a {
      font-family: "Overpass";
      font-style: normal;
      background-color: #015138;
      text-shadow: 0px 0px 0px;
      color: #ffffff;
      padding: 5px;
      border-radius: 6px 6px 6px 6px;
      width: fit-content;
      align-content: center;
      margin: 0 auto !important;
    }
    
    .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-top: 2px solid #ffffff;
      border-left: 2px solid #ffffff;
      border-right: 2px solid #ffffff;
      border-radius: 6px 6px 0px 0px;
      padding: 2px;
    }
    
    .entry-meta {
      width: fit-content;
      align-content: center;
    }
    
    .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;
    }
    
    .entry-meta {
      margin: 0 auto !important;
    }
    
    #footer-sidebar.clear.widget-area,
    menu-toggle {
      background-color: #015138;
    }
    
    #footer-sidebar.clear.widget-area a {
      color: #ffffff;
    }
    
    .menu-toggle {
      background-color: #015138;
    }
    
    a,
    a:hover {
      color: #015138;
    }
    
    #subscribe-label.subscribe-label {
      width: 400px;
      font-family: "Overpass";
    }
    
    #subscribe-blog-label.subscribe-label {
      width: 400px;
      font-family: "Overpass";
    }
    
    .nav-bar {
      color: #015138;
      background-color: #faf9f5;
    }
    
    #site-navigation a {
      color: #015138;
    }
    
    .error404,
    .error404 a {
      color: #ffffff;
    }
    
    span[class*="simple-icon"] {
      width: 1.5em;
      height: 1.5em;
    }
    
    #comments.comments-area {
      background-color: #faf9f5;
      text-align: center;
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change background of comment area’ is closed to new replies.