How to get sidebar widget headers smaller in A11Y'all

  • I’ve managed to adjust the font-size for the headers in the main page but I cannot figure out how to do the same for the sidebar widget headers.

    I was able to reduce the text in the widgets but not the headers. They look like they are font-size: 2em. I’ve tried adding this to the a11yall-child theme but they are still enormous and take up a lot of room in the sidebar.

    #main.aside.widget, #main.aside.widget_text div.textwidget {font-size: 96%;}

#main.widget-area h2 {
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;
font-size: 1em;
line-height: 1.2em;
font-weight: bold;
margin: 0 0 5px;
padding: 0;
text-transform: none;
}

#main.widget-area h3 {
font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;
font-size: 0.9em;
line-height: 1.1em;
font-weight: bold;
margin: 0 0 5px;
padding: 0;
text-transform: none;
}

Viewing 2 replies - 1 through 2 (of 2 total)

  • sleeplessinDC,

    Is your site live anywhere or just local? It would be helpful to be able to inspect the code on the site in order to provide a better answer.

    Either way, it’s a specificity issue with the CSS. Your CSS isn’t specific enough to override the theme. I would suggest targeting the h2 by its class name for better results, so your code would look something like the following (note that I’m also using the Font shorthand instead of writing our multiple declarations.

    https://css-tricks.com/snippets/css/font-shorthand/

    .widget-area .widget-title {
  -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;
  font: bold 1em/1.2em "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 0 5px;
  padding: 0;
  text-transform: none;
}
    Thread Starter sleeplessindc

    (@sleeplessindc)

    The site is at https://accessible-techcomm.org

    When I look at the source code, I don’t see a widget-title.
    I had tried .widget-area .widget_text h2 but that didn’t work.

    I just tried the following but it doesn’t work either:

    .widget-area aside.widget .widget_search,
.widget-area aside.widget. widget_text h2 {
font-family: "Trebuchet MS", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 90%;
	font-size: 90%;
	line-height: 1em;
	font-weight: bold;
	margin: 0 0 5px;
	padding: 0;
	text-transform: none;
}

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to get sidebar widget headers smaller in A11Y'all’ is closed to new replies.