Change the size of the box of the header image

rgw2011 · Member · Apr 21, 2017 at 1:37 pm
Copy link

Add topic to favorites
Hi,Iwould like to reduce the size of the box for the header image because when I use an image its don’t look good and I thing this is beacuse the box is too big. How can I do that knowing that I don’t want it to affect the look of my site on mobile

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · Apr 22, 2017 at 8:17 am
Copy link
Hello @rgw2011,
The image might not look as you desire because the image is being cut off from the sides in order to ensure the images fills up the entire header area on all display sizes, this is done by this CSS code:
```
.hero-image .hero {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
```
Notice the cover codes, fills up the header area on all display sizes.

To change the header size, use this CSS code:
```
.with-featured-image {
    padding: 100px 0 !important;
}
```
change the 100px value to any value your like, to get your desired result with the header image.

Hope this helps! 🙂
rgw2011 · Member · May 3, 2017 at 9:38 am
Copy link
How it works butin fact the realproblem is that my pictures are not large enough to fit with the box-sizing. so is it possible to reduce the larger of the box?
otpidusprime · Member · May 3, 2017 at 11:01 am
Copy link
Hi again @rgw2011,
Yes can reduce the larger box. Notice this code:
```
.with-featured-image {
    padding: 100px 0 !important;
}
```
i gave you in my previous answer?

So just reduce the 100px value to reduce the size of the box:
```
.with-featured-image {
    padding: 60px 0 !important;  /*reduce mode if you must*/
}
```
rgw2011 · Member · May 3, 2017 at 12:04 pm
Copy link
yes I have already done that but it reduce the boxe from the top to the bottom and I want to know if it’s possible to reduce the box from the right to the left? I don’t know if it’s clear
otpidusprime · Member · May 3, 2017 at 3:15 pm
Copy link
yes I have already done that but it reduce the boxe from the top to the bottom and I want to know if it’s possible to reduce the box from the right to the left? I don’t know if it’s clear

Okay, that was not clear in your previous answer.

So to do that, you need to use the CSS width property, like this:
```
.with-featured-image {
    padding: 140px 0!important;
    width: 1000px;
    margin: 0 auto;
}
```
But this code will reduce the width of the featured header image only. It will look quite odd. So to solve that we have to reduce the entire site wrapper:
```
.site {
    width: 1000px;    /*change it if you must*/
}
```
And also the element that wraps the header image texts:
```
.entry-content {
    width: 900px;   /*this must be always less than or equal to the above .site width*/
    margin: 0 auto;
}
```
Let us know if it helps 🙂

No items found.