Community Forums › Forums › Archived Forums › General Discussion › Hello! Pro – Home Image
- This topic has 7 replies, 4 voices, and was last updated 7 years, 8 months ago by louise.
-
AuthorPosts
-
August 6, 2016 at 6:11 am #190825louiseMember
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.infoAugust 6, 2016 at 7:39 am #190828ChristophMemberHi 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.
August 6, 2016 at 10:40 am #190834louiseMemberThanks 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?
August 6, 2016 at 5:13 pm #190846ChristophMemberIt 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.
August 7, 2016 at 10:51 am #190871louiseMemberThanks Christoph, but that didn't work either. I guess we'll have to live with it or find a different theme. Too bad.
August 7, 2016 at 2:09 pm #190882emasaiParticipantThis 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.comAugust 9, 2016 at 8:24 pm #191010Sridhar KatakamParticipantTo 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?
August 13, 2016 at 10:14 am #191217louiseMemberThanks everyone for your help. BrandID issued an update which fixed this problem.
Regards,
Louise
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.