How to make featured image in blogpost smaller?

hi there,

where is the option to make the featured image smaller on the blogpostpage itself?
i received and added this code last year, but that only works on the size of the thumbs (if that is the right word?) on the page with the overview of all the blogposts.
i add this in customizer/custom. there are blocks for css.

.blog .entry-featured {
float: left;
width: 100%;
margin-right: 10px;
}
so changing the width here changes the size of the thumbnails, but not of the picture in the blog itself. and i would like to have that a bit smaller.
txs

Hello @wonderacademie,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

.single-post .entry-featured {
    width: 50%;
    margin: 0 auto;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

thank you.
but nothing changes when i add this. i tried also with a 100% and 10 %, but the image remains the same size.

Hi @wonderacademie,

The code @Prasant suggested should work for the single posts. There might be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

In case there is no issue in the code, please provide us with the link to the site in question.

Hope this helps.

there are some issues, but they have to do with tips that i received as answers on previous questions in this forum.

error 33 3 Parsing Errors Expected RBRACE at line 33, col 3.
!important;
All
error 50 12 Parsing Errors Unexpected token ‘;’ at line 50, col 12.
color: ;
All
warning 1 14 Disallow qualified headings Heading (h1) should not be qualified.
.single-post h1 {

i changed error 50 by removing it.
but i dont know what to do with error 33 or the warning.

the site is wonderacademie.nl

Hi @wonderacademie,

If you have a syntax error somewhere on your custom CSS, chances are the other custom CSS succeeding to that error will be affected, it does not matter where that custom CSS is for.

Try adding the CSS code provided by Prasant at the top of Theme Options > CSS you’ll see it will work.

You can ignore the warning, but you need to address the errors.

Provide us login credentials in a secure note if you’re having trouble finding/addressing the errors.

Thanks,

found it!
but it led to another question… (see below)

somewhere below it said this:
@media (min-width: 980px){
.single-post .entry-featured {
width: 70%;
}
i removed that and now it becomes smaller.
but: what does that
@media (min-width: 980px)
mean?
because i have now also removed that.
question: should that go back somewhere?

and other question:
i dont know what to do with this
error 33 3 Parsing Errors Expected RBRACE at line 33, col 3.
!important;

how do i find the secure way to provide you with the details?

Thank you!

Hi @wonderacademie,

Please add that back and add a closing bracket } to it.

e.g.

@media (min-width: 980px){
	.single-post .entry-featured {
		width: 70%;
	}
}

That means you have another custom CSS that does that and it has a smaller value than width: 70%.

Those custom CSS are starting to work now because the syntax error resolves.

Cheers!

i don’st see that in my screen, only inline reply option.

sorry, now i see it!

i dont know what to do with this
error 33 3 Parsing Errors Expected RBRACE at line 33, col 3.
!important;

how to fix this?

Hey @wonderacademie,

Thank you for the credentials. I checked your custom CSS and you had multiple syntax errors, I went ahead and fixed them. Please validate your CSS now.

You can check validate your CSS via http://csslint.net/ or https://jigsaw.w3.org/css-validator/#validate_by_input

Cheers!

Thank you!

You’re welcome, @wonderacademie.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.