Making photos level in Monochrome Pro

[designerwriterParticipant]

Hello. A while back, I asked how I can make the photos in the sidebar level with the photos on the main section. I edited the code and it worked. Now I find that the photos in the sidebar are too high and not level. I am not sure what happened if it changed with the update to the theme. How can I fix this? Do I add the code to the Additonal CSS section?

Here is another page in addition to the original URL I supplied:

Celestial Bodyworks

http://griefcandorandlove.com/about/

[designerwriterParticipant]

Can someone help me please?

[TerryParticipant]

Morning,

You can add the following code into your style.css or Customizer=>Additional CSS, depending on your comfort level.

.sidebar {
	padding-top: 50px;
}

<a href="https://studiopress.community/users/media/" rel="nofollow">@media</a> only screen and (max-width: 1023px) {
	.sidebar {
	padding-top: 0;
}
}

Victor has a great tutorial on using your browser's inspection tool that may help.

Warm Regards,
Terry

[designerwriterParticipant]

Hi Terry. I am getting this error that says..“Markup is not allowed in CSS.There are 15 errors which must be fixed before you can save.” It won’t let me publish this code under Additional CSS unfortunately. What should I do now?

I know it’s the code you posted because when I took it off, I was able to publish it so I am not sure what is wrong with that code or why I can’t publish it.

[TerryParticipant]

Hi,

Not sure how that link got in there, it should NOT be there and is generating that error.

Here's what it should be, sorry for the confusion...

.sidebar {
    padding-top: 50px;
}
 
<a href="https://studiopress.community/users/media/" rel="nofollow">@media</a> only screen and (max-width: 1023px) {
    .sidebar {
    padding-top: 0;
}
}

I can't remove the link... try "@media only screen and..."

[designerwriterParticipant]

So should it be this Terry:

.sidebar {
padding-top: 50px;
}

@media only screen and (max-width: 1023px) {
.sidebar {
padding-top: 0;
}
}

[designerwriterParticipant]

Ok this worked:

.sidebar {
padding-top: 115px;
}

@media only screen and (max-width: 1023px) {
.sidebar {
padding-top: 0;
}
}

I changed the 50px value to 115px and the photo moved down to be level with the other photo. Thanks for your support Terry!

[TerryParticipant]

So glad it worked!

Take Care,
Terry

[designerwriterParticipant]

Thank you Terry! Take care right back at you.

designerwriter

[TerryParticipant]

Just testing:

.sidebar {
    padding-top: 50px;
}
  
@media only screen and (max-width: 1023px) {
    .sidebar {
    padding-top: 0;
}
}

[Author]

Posts