Widget links and text widget links do not align

  • Site I’m working on: askcathryn.com

    Theme: Foreverwood

    On the right sidebar, I have widgets: text, text, Archives, and Categories.

    I add links to the text widgets but they do not align with the links in Archives and Categories. I’m not a from scratch coder but do well figuring out something that’s there. Anyone see a way to correct this? I appreciate the help.

    If it will allow me to post, here is the sidebar coding:

    /* sidebar
-------------------------------------------------------------- */

.sidebar-widget {
  color: #565656;
  float: left;
  font-size: 13px;
  margin-bottom: 25px;
  width: 100%;
}
.sidebar-widget .sidebar-headline {
  background: #D7cec7;
  color: #565656;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 19px;
  margin: 0;
  padding: 6px 10px;
  position: relative;
}
.sidebar-widget .sidebar-headline a {
  color: #565656;
  text-decoration: none;
}
.sidebar-widget img {
  height: auto;
  max-width: 100%;
}
.sidebar-widget table {
  font-size: 13px;
}
.sidebar-widget p {
  margin: 6px 0 -4px;
}
.sidebar-widget p,
.sidebar-widget ul li,
.sidebar-widget ol li {
  color: #565656;
  font-size: 13px;
}
.sidebar-widget ul {
  background: left top repeat url(images/sidebar-ul.png);
  margin: 0;
}
.sidebar-widget ul ul {
  background-image: none;
  margin-top: 0;
}
#sidebar .widget_rss ul {
  background-image: none;
}
.sidebar-widget ul li {
  height: auto;
  line-height: 32px;
  list-style-type: none;
  min-height: 32px;
  padding-left: 10px;
}
.sidebar-widget a {
  color: #565B91;
  text-decoration: none;
  -webkit-transition: color 1s ease;
     -moz-transition: color 1s ease;
       -o-transition: color 1s ease;
      -ms-transition: color 1s ease;
          transition: color 1s ease;
}
.sidebar-widget ul li a {
  text-decoration: none;
}
.sidebar-widget a:hover {
  color: black !important;
  text-decoration: none;
}

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

  • You could try

    .sidebar-widget .textwidget {
	padding: 0 10px;
}

    That would give the text widgets (and only the text widgets) a bit of side padding to match the side padding on your widget headlines.

    Thread Starter ucphotog

    (@ucphotog)

    Stephencottontail

    Thank you. I had to move it up to 15px, but they’re aligned on 3 full browsers and a mobile browser.

    Thread Starter ucphotog

    (@ucphotog)

    Stephencottontail or other knowledgeable folks,

    Site I’m working on: askcathryn.com
    Theme: Foreverwood
    WP and theme updated (4.5.2? and theme 2.0.1?)

    I’ve added another plugin which works as a widget.
    Plugin name: Content Randomizer

    I am encountering the same problem as my text widget issue – left alignment of the text under the widget headline. Stephencottontail got me the info to fix the text widget above. Now I’ve got another widget.

    As a general question, how can I find the CSS name for the widget, such as this one for the text widget: .sidebar-widget .textwidget ?

    I looked using firebug, but could not decipher it. I tried .sidebar-widget .randomizerslideshowwidget and a few other items but none seem to affect it.

    Thanks for sharing your knowledge,
    Marc

    We’ll have to take a different approach here, because the new widget doesn’t wrap its contents in a separate <div> that we can target with CSS. Instead, let’s remove the padding from the widget titles so everything lines up properly.

    First, remove the old CSS:

    .sidebar-widget .textwidget {
  padding: 0 15px;
}
.sidebar-widget .randomizerslideshowwidget {
  padding: 0 15px;
}

    and then we’ll remove the side padding on the widget titles:

    .sidebar-widget .sidebar-headline {
  padding-left: 0;
  padding-right: 0;
}
    Thread Starter ucphotog

    (@ucphotog)

    Once again, you came through. I had to find the other items (archives and categories) and remove the padding but it’s looking great thanks to your help.

    Thank you. I appreciate your time & expertise.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Widget links and text widget links do not align’ is closed to new replies.