Archived topic
trying to match old theme header
5 replies · Started by Weatherly on February 2, 2021
We are trying to replace an old highly custom theme with Generatepress and the parallax banner is proving challenging.
I am using the Elements feature of the premium plugin which has at least some of the features (parallax and all) to mimic the old theme page headers. But the image isn't matching. The old site theme somehow is using different size images without them getting distorted. The same images in the new theme on the staging site are. I have noticed at least part of the css it's using is on a div above that particular background image element. I'm not sure if this is the only thing it needs, but there is no div above the element in Generatepress that is added by the premium plugin. If I need this div where would I add it? Any tips on what else it might need? Maybe I'm missing a setting in the Elements?
Hi there,
you have this CSS in your Simple CSS:
.page-hero {
background-size: 100% 100%;
}
That is whats distorting the image. You can remove that style as by default the hero sets the size to cover which is what your old site is using.
Ok that helps most of them but now one doesn't fit at all.
I have no clue how they got that to fit in there without chopping off at a bad spot. I think I copied the code off their site to make this specific one fit.
Hi Weatherly,
I check the page, and I'm afraid this specific image is not fit as a banner.
As you can see here, even if I move the image up, it still doesn't look good.
https://www.screencast.com/t/8PgE4vcU
You have 2 options here:
1. Change the image.
2. Add more padding to the title to make the banner taller.
Let me know :)
Ok we'll use a new image. Thank you.
No problem Weatherly :)