Change background of comment area

  • Resolved Benjamin Lukoff

    (@lukobe)


    4 years, 11 months ago

    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!! Screen shot at https://i.imgur.com/SAZzSKn.png

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Gemma Evans

    (@gemmaevans)

    4 years, 11 months ago

    Hi @lukobe,

    I’ve managed to make the background of the comments area #FAF9F5, but the margins are non-existent.

    In my testing, this CSS helps increase the width of the comment area:

    #comments.comments-area {
    margin-left: -3em;
    margin-right: -3em;
}

    However, this will only hide a broader issue with the CSS being used. It looks like you have created conflicting widths for the comments area, content area and the article within it. For example:

    max-width: calc(100% + 6em);

    I recommend removing any widths, margin, padding and borders you have added to these areas, to ensure you have a clean slate. Otherwise you will be trying to make changes based on behaviour from conflicting CSS which will take more time to fix in the long run.

    #comments sits within the #content div so you shouldn’t need to specify a width for each one individually. Any width specified for #content should be applied to the comments area automatically.

    Thread Starter Benjamin Lukoff

    (@lukobe)

    4 years, 11 months ago

    Thank you @gemmaevans! I’ll give it a shot.

    Thread Starter Benjamin Lukoff

    (@lukobe)

    4 years, 11 months ago

    So, this works on desktop view beautifully, but in mobile, not so much. See screen shot at https://i.imgur.com/JOlDQQr.png .. this is unfortunately what happened to me when I tried a different way to make this look right.

    The thing is, I’m not sure how these conflicting widths got created. I don’t recall specifying widths for the main content area or the article… The only widths I have are for particular elements, like

    #subscribe-label.subscribe-label {
  width: 400px;
  font-family: "Overpass";
}

#subscribe-blog-label.subscribe-label {
  width: 400px;
  font-family: "Overpass";
} </code> or <code>.entry-meta {
  width: fit-content;
  align-content: center;
}

    etc. Here is all the custom CSS I have. Do you think it’s an issue with the theme itself?

    .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 {
    margin-left: -3em;
    margin-right: -3em;
    background-color: #faf9f5;
  text-align: center;
}
    supernovia

    (@supernovia)

    4 years, 11 months ago

    Hi, sorry we missed this earlier. To be honest, this theme has some complex width calculations going on. This may work … it’s just borrowing from the theme’s CSS for the content area:

    @media only screen and (min-width: 860px) {
  #comments.comments-area {
    padding: 3em 3em 1em;
  }
  #comments.comments-area {
    margin-left: -3em;
    margin-right: -3em;
    max-width: calc(100% + 6em);
  }
}

#comments.comments-area {
    background: #faf9f5;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
}

@media only screen and (max-width: 640px) {
  #comments.comments-area {
    padding: 1em;
		margin: -1em;
  }
}
    Thread Starter Benjamin Lukoff

    (@lukobe)

    4 years, 11 months ago

    That worked perfectly @supernovia! Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change background of comment area’ is closed to new replies.