Hello! Pro – Home Image

[louise]

I've been having a problem with the home image in Hello! Pro, and unfortunately BrandID have been unable to come up with a fix; I hope someone here can help.

Initially, when I installed the transparent png in the dimensions BrandID recommends, the top of the image got cropped off, and it didn't sit flush with the bottom edge of the Home Welcome area.

BrandID suggested this piece of code, which helped with the cropping, but not with the sitting flush at the bottom of the container:

.top .wrap .home-image .textwidget img{
margin-bottom: 0;
}

That code also created a new problem of adding extra padding to the bottom of the Home Welcome area.

Then they suggested adding this code, which didn't do anything to alleviate the problem:

.home-image > .widget {
display: table-cell;
vertical-align: bottom;
}

BrandID haven't come back to us with any other suggestions. All I want is for the image to look like the demo. Any suggestions welcome.

Thanks,

Louise

http://johnmorris.info

[Christoph]

Hi Louise,

I have seen this before when the Black Studio widget was used instead of a regular text widget.
While this does not explain why the Black Studio widget doesn't play well with Hello Pro, simply swapping it for a text widget should fix the issue.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[louise]

Thanks Christoph,

I swapped for regular text widget but the home image still doesn't stick to the bottom of the container. this is whether or not I use the code add-ins BrandID gave me.

Also, this still doesn't address why there is so much padding after the text in the home image area.

any ideas?

[Christoph]

It looks like your image is not actually 315x380 but 295x379. That will throw things off.

It feels a big hacky, but adding
height: 390px;
to .top .wrap .home-image .textwidget.show img {
places the bottom of the picture at the bottom of the div.

http://prntscr.com/c2icj4

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[louise]

Thanks Christoph, but that didn't work either. I guess we'll have to live with it or find a different theme. Too bad.

[emasai]

This might help but uses absolute positioning, which will mean you will have to modify your media queries. It still works at 1024px at least on my screen.

Add position: relative to .top .wrap and .home-image
then add this.

.top .wrap .home-image .textwidget.show img {
opacity: 1;
margin: 0px;
position: absolute;
bottom: 0;
left: 50px; /*modify this */
}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[Sridhar Katakam]

To the OP, you wrote,

Initially, when I installed the transparent png in the dimensions BrandID recommends, the top of the image got cropped off, and it didn't sit flush with the bottom edge of the Home Welcome area.

Can you share that image's URL so I can download and test the same in my Hello! Pro install?

---

Genesis Tutorials | Follow me on Twitter

[louise]

Thanks everyone for your help. BrandID issued an update which fixed this problem.

Regards,

Louise

[Author]

Posts