Fixing featured image on Purpose Theme

fluxathletictherapy · Member · Apr 27, 2016 at 3:12 pm
Copy link

Add topic to favorites
How can I fix my theme so that it doesn’t zoom into the featured image in the header and cut off/blur the photo?

http://carpediemflux.com
thesacredpath · Member · Apr 27, 2016 at 11:56 pm
Copy link
Hi there, due to the way the HTML is structured, and given that the theme is designed to have the image full width of the window/screen, we would have to set things so that the image did not go full width. You can add the following to your custom CSS and give it a try.
```
.feature-img.page-banner {
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
    max-height: 500px !important;
    max-width: 1580px;
    min-height: 520px !important;
    background-position: center top;
}
```
thesacredpath · Member · Apr 28, 2016 at 12:14 am
Copy link
Hi there, due to the way the HTML is structured, and given that the theme is designed to have the image full width of the window/screen, we would have to set things so that the image did not go full width. You can add the following to your custom CSS and give it a try.
```
.feature-img.page-banner {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
    max-width: 1580px;
    min-height: 100px;
}
@media screen and (min-width: 1025px) {
#navigation {
    display: block;
    float: none;
    text-align: center;
}
#navigation ul {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
.header-large .row .eleven {
    width: 100%;
}
}
```
The Media Query included in the above centers the navigation menu within the image area otherwise, because it is set as “fixed” it stays glued to the right border of the browser window viewport and on wider screens looks bad because it is partway in the image area and partway out.
fluxathletictherapy · Member · Apr 28, 2016 at 12:19 am
Copy link
Yes, Second one works great with keeping the flow the same. Thanks a ton!
thesacredpath · Member · Apr 28, 2016 at 2:11 am
Copy link
Awesome, and you are welcome.

No items found.