-
AuthorPosts
-
November 5, 2019 at 4:01 pm #1154015
Hi Support-Team,
I do have a little issue with one of the wpcs content tabs i integrated into one of our Enfold websites. The problem is the tab “Aktion starten”. If you open it, so far it looks fine, apart from the background image with the 3 figured at the bottom. The background-image with the 3 figures should be displayed similar how you can see it at the first tab “Jetzt spenden”. So they should overlap the white tab background-image in the bottom area.
Need a litte CSS hack to sort this out ;).
Thx,
FrankNovember 6, 2019 at 6:53 pm #1154384Hey Frank,
Could you please attach some screenshots of the issue?
I did not see the tabs there.
Best regards,
VictoriaNovember 6, 2019 at 7:18 pm #1154396Hi Victoria,
sure. Here you go:
Image-URLs:
Screen1
Screen 2
How it should look- This reply was modified 5 years, 1 month ago by force-media.
November 11, 2019 at 8:13 am #1155504Hi,
Thank you for the update.
Did you add the following css code?
#wpcs_content_inner_8438 { height: 500px !important; padding-top: 50px !important; background-image: url("/../../wp-content/uploads/2017/12/footer_figures_bg.png") !important; margin: 0px !important; border: none !important; background-size: auto 140px !important; background-position: 50px 600px !important; background-repeat: no-repeat !important; }
The height property in the css limits the tallness of the container to 500px. You can either remove the property completely so that the container responds to the content or try to adjust its value.
Best regards,
IsmaelNovember 11, 2019 at 11:25 am #1155539Hi Ismael,
Thanks for your help. I appreciate your assistance on this.
Yes, i added the css code you mentioned. As per your suggestion i have removed the “height” property, but unfortunately it didn’t solve the problem. As you can see on the website the background-image is visible, but it should overlap the inner container similar to the first content slider “Jetzt spenden”.
Hope this makes a bit more clear about the goal i want to reach.
Thanks,
FrankNovember 12, 2019 at 7:16 am #1155845Hi,
Thank you for the update.
Instead of adding the image as the background of the wpcs_content container, create a pseudo element, apply the background to it and adjust its position so that it is located at the very bottom of the container. Please add this css code in the Quick CSS field or the child theme’s style.css file.
#wpcs_content_inner_8438::after { content: ''; background: url("/../../wp-content/uploads/2017/12/footer_figures_bg.png"); width: 190px; height: 130px; position: absolute; bottom: -120px; }
Best regards,
IsmaelNovember 12, 2019 at 1:02 pm #1155990Hi Ismael,
Thanks for your help.
I’ve used the pseudo element you mentioned and it works partially. As you can see now the background pseudo element is shown but i have to scroll down to view the figures (on a desktop). Do you see any way to avoid scrolling down? Does the wpcs_overlay element causes the issue?
Best regards,
FrankNovember 14, 2019 at 5:26 am #1156639Hi,
Thank you for the update.
You can either trim the content to decrease the height of the container, or adjust the font size of the text inside.
.wpcs_content_main p, .wpcs_content_main li { font-size: 10px; line-height: 2em; }
You can also adjust the padding around the content and remove the minimum height from the following css modification.
#wpcs_content_inner_8438 { padding-top: 10!important; margin: 0px !important; border: none !important; } div#wpcs_content_inner_8438 { display: none; max-width: 100%; min-height: 0; background: #fcfcfc; padding: 20px 20px 20px 20px; margin: 60px 40px 60px 40px; color: #666666; border: 1px solid #ffffff; }
Then adjust the bottom position of the pseudo element.
#wpcs_content_inner_8438::after { content: ''; background: url("/../../wp-content/uploads/2017/12/footer_figures_bg.png"); width: 190px; height: 130px; position: absolute; bottom: 0; }
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.