Change size of featured image on page – make smaller

kaylarperry · Member · Jun 7, 2016 at 7:12 pm
Copy link

Add topic to favorites
Hi there! Is there a way to make the featured image smaller on this page? The template doesn’t seem to allow for it within the page editing: https://kaylarperry.com/about/

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 8, 2016 at 2:33 pm
Copy link
Hi, add the following to your custom CSS at the bottom below all other and see what you think. I’ve limited this to 600px and wider screens/windows since below that point the image size doesn’t seem to be an issue.
```
@media screen and (min-width: 600px) {
.page-id-3 .entry-media {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}
}
```
Another option would be to insert the same image into the content of that page, either left or right aligned with a size of “medium” and then we could use the following CSS to hide the featured image on that page.
```
.page-id-3 .entry-media {
    display: none;
}
```
kaylarperry · Member · Jun 8, 2016 at 2:46 pm
Copy link
That works! Thanks :)
thesacredpath · Member · Jun 8, 2016 at 5:07 pm
Copy link
Hooray and you are welcome!
kaylarperry · Member · Jun 12, 2016 at 11:25 pm
Copy link
Hi @thesacredpath, is there a way to change the size of the photo (to the same size as the CSS you posted above) on this page, as well?

It’s: https://kaylarperry.com/ (the home page).

Thanks!
supernovia · Staff · Jun 13, 2016 at 10:55 pm
Copy link
Hi, sure. Swap out the code you were originally given for this:
```
@media screen and (min-width: 800px) {
	.page-id-3 .entry-media, .home .entry-media {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
}
```
This specifies just those two pages. If you want all pages to have a smaller .entry-media featured image, let us know and we’ll figure out the code for that.

No items found.