Post tags indented

I think that the problem is that your child theme contains all of the CSS from your parent theme.

Your child theme CSS should only have the changes needed for you child theme.
Right now your child theme CSS is trying to include the HTML fonts (genericons) and they are not there.

If you haven’t changed any of these in your child theme, i would remove all of this part:

/* =Icons
----------------------------------------------- */
@font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.genericon {
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	vertical-align: text-bottom;
}

/**
 * IE7 and IE6 hacks
 */
.genericon {
	*overflow: auto;
	*zoom: 1;
	*display: inline;
}
.cat-links a:first-child:before,
.tags-links a:first-child:before,
.comments-link a:before,
.edit-link a:before {
	font: normal 16px/1 Genericons;
	padding: 2px 10px 0 0;
}
.cat-links a:first-child:before { content: "\f301"; }
.tags-links a:first-child:before { content: "\f302"; }
.comments-link a:before { content: '\f300'; }
.edit-link a:before { content: '\f411'; }

Thank you for the response! Me and my stupid child theme workaround… I’ll have to try and do the CSS correctly! I did remove the part you suggested, but that didn’t seem to have an effect. However, I haven’t removed all the redundancies in the CSS yet, so I should probably try that next when I have a bit of time.

Thank you for the advice! I love this theme so much.

Hi simbel,

That’s great, have a look at the documentation for child themes – https://codex.www.ads-software.com/Child_Themes
if you want to know how to get started.

The important part is that you need to call the right template name and use the @import function to call the parent CSS.

Below that, you add your custom CSS.

Hi Christine,

so I fixed my child CSS to retain only the bits I changed in the original (and whatever I added). Now the tags align properly – but those cute little icons are gone! Any ideas what I might have done wrong now?

P.S. Thank you very much for being so supportive – must be annoying when people mess around with your work and break stuff ??

Signe

Hi Christine,

so I fixed my child CSS to retain only the bits I changed in the original (and whatever I added). Now the tags align properly – but those cute little icons are gone! Any ideas what I might have done wrong now?

P.S. Thank you very much for being so supportive – must be annoying when people mess around with your work and break stuff ??

Signe

Hi Signe,

That’s so strange.
I can see the genericons on my end, but they are still messed up.

Can you try adding the following to your child theme Css:

genericon {
text-align:left;
}

If that screws up any other icons on your site, try using this instead:

.tags-links.genericon {
text-align:left;
}

The second snippet of code did it! The icons appear, and the tags now align where they should. The ‘Edit’ link was always completely out of place, but you can’t see that because you’re not logged in. It’s like this: https://imgur.com/CRb6uDv

I wonder if it had something to do with the width change I applied to the header:

.site-header {
	max-width: 840px;
	margin: 0 auto;
}

I did that to decrease the maximum size of the header font without messing up any of the responsive code.

Hi Signe,

So on my test site, I copied the style.css of your child theme and made a child theme of my own and the tags and edit link both look fine. I don’t understand why they are misaligned on yours.

I don’t have any plugins installed though.
You may want to try and deactivate your plugins to see if there’s an issue with one of them. If there is, can you let me know which one?

Cheers