Border tops missing on blog posts (CSS help)

  • jeffbousquet

    (@jeffbousquet)


    10 years, 3 months ago

    I have used the following CSS code for my site, to get my pages to look the way I want them to:

    .type-post, .type-page {
	background: #cccccc;
	width: 1100px;
	padding: 18px;
	border: 15px solid #a6a6a6;
	margin-left: -200px;
}

.post {
	border: 15px solid #a6a6a6;
	background: #cccccc;
	margin: 30px;
	padding: 20px;
	line-height: 20pt;
	margin-left: -200px;
}

    On my “Podcast” page, everything looks fine. However on the “blog” page, the tops of the borders around the posts are cut off. Could anyone offer suggestions as to what I’m doing wrong/how to fix this? Thanks very much. Please excuse the site as it is still a work in progress. My site is: http://soundsoftheaveragelife.com

Viewing 1 replies (of 1 total)
  • MarkRH

    (@markrh)

    10 years, 3 months ago

    Looks like the .type-post style is being overridden. This should keep it from happening:

    .type-post, .type-page {
	background: #ccc;
	width: 1100px;
	padding: 18px !important;
	border: 15px solid #a6a6a6 !important;
	margin-left: -200px;
}

    It is first being overridden by:

    .post {
	border: 15px solid #a6a6a6;
	background: #ccc;
	margin: 30px;
	padding: 20px;
	line-height: 20pt;
	margin-left: -200px;
}

    And then by:

    .archive .site-main > .hentry:first-of-type, .blog .site-main > .hentry:first-of-type, .search .site-main > .hentry:first-of-type {
	padding-top: 0;
	border-top: 0;
}

    Adding !important will keep the other styles from overriding it.

Viewing 1 replies (of 1 total)

The topic ‘Border tops missing on blog posts (CSS help)’ is closed to new replies.