Change size of featured images

mapetitepuceblog · Member · May 20, 2016 at 9:25 am
Copy link

Add topic to favorites
I want CSS to make my featured images smaller, and my theme is Button.

Thanks in advanced.

The blog I need help with is: (visible only to logged in users)
carladoria · Member · May 20, 2016 at 5:02 pm
Copy link
Hi,
Try playing with the following CSS (changing the percentages):
.site-header {
text-align: center;
width: 80%;
height: 80%;
margin: auto;
}

Hope it helps!
mapetitepuceblog · Member · May 20, 2016 at 5:18 pm
Copy link
Hi, it doesn´t work. Maybe I´m doing something wrong…

I just have to include that code in the white box?

Thanks!
carladoria · Member · May 20, 2016 at 6:24 pm
Copy link
Hi there,
Sorry, it’s my bad. The code I provided above is for the header image and you’re referring to the featured images of each post. Please try this code:

@media only screen and (min-width: 40.063em)
.featured-image {
overflow: hidden;
height: 80%;
width: 80%;
margin: auto;
}

You can erase the code before and add this one.
mapetitepuceblog · Member · May 20, 2016 at 7:22 pm
Copy link
It doesn´t work again. I need to tick any complementary box?

Thank you so much!
carladoria · Member · May 20, 2016 at 7:28 pm
Copy link
Just to make sure, don’t forget to click “Save” after pasting the CSS code.
dianakcury · Member · May 20, 2016 at 10:27 pm
Copy link
Hi!

Please, first launch your site customizer then click on the CSS tab to access the CSS editor.

Enter the code below and click Save & Publish button in order to save the changes:
```
.featured-image {
    width: 70%;
    margin: 0 auto;
}
```
For more details, please, refer to Custom CSS and How to Add Custom CSS.

Hope it helps :)
mapetitepuceblog · Member · May 21, 2016 at 10:02 am
Copy link
Now it works, but not in the vertical images. Do you know why?
Thanks!!
thesacredpath · Member · May 21, 2016 at 4:39 pm
Copy link
Hi there, the featured images on Button work best when they are landscape orientation (wider than they are tall), but try adding this to your custom CSS to force the portrait oriented images to be full width of the .featured-content div.
```
.featured-image img {
    width: 100%;
}
```

No items found.