Docs

[natemancini]

Hello, I am using the Integrity stack, and I would like to know how to make a header image appear on my blog page but NOT on my portfolio page.

I successfully got a header image to appear on my blog page with the following code:

@media (min-width:979px){
.blog .x-header-landmark, .x-header-landmark.x-container {
  background-size: contain !important;
  background-color: #1F3047 !important;
  background-position: center center !important;
  width: 100%;
  max-width: 88%;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url('http://www.forefrontfestival.com/wp-content/uploads/2016/04/Blog.jpeg');
  border-radius: 10px;
	}
}

@media (max-width:978px) {
  .blog .x-header-landmark, .x-header-landmark.x-container {
    height: 0px;
  }
}

But the image appeared on my portfolio page as well for some reason. I thought I could simply hide the image on the portfolio page using this code:

.page-id-270 .x-header-landmark, .x-header-landmark.x-container {
  background: none;
  }

But the code did not work — it removed the header image from the blog as well. How can I make the header image appear on the blog but not the portfolio? Thank you!

[natemancini]

This reply has been marked as private.

[Thai]

Hi There,

Please update your custom CSS with this:

@media (min-width:979px){
	.blog .x-header-landmark, 
	.blog .x-header-landmark.x-container {
		background-size: contain !important;
		background-color: #1F3047 !important;
		background-position: center center !important;
		width: 100%;
		max-width: 88%;
		height: 400px;
		background-repeat: no-repeat;
		background-image: url('http://www.forefrontfestival.com/wp-content/uploads/2016/04/Blog.jpeg');
		border-radius: 10px;
	}
}

@media (max-width:978px) {
	.blog .x-header-landmark, 
	.blog .x-header-landmark.x-container {
		height: 0px;
	}
}

Hope it helps 🙂

[natemancini]

That worked, thanks!

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts