Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 5, 2019 at 4:01 pm #1154015
    force-media

    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,
    Frank

    November 6, 2019 at 6:53 pm #1154384
    Victoria

    Hey Frank,

    Could you please attach some screenshots of the issue?

    I did not see the tabs there.

    Best regards,
    Victoria

    November 6, 2019 at 7:18 pm #1154396
    force-media

    Hi Victoria,

    sure. Here you go:


    Opened Tab / Form
    How the bg figures images should look like

    Image-URLs:
    Screen1
    Screen 2
    How it should look

    November 11, 2019 at 8:13 am #1155504
    Ismael

    Hi,

    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,
    Ismael

    November 11, 2019 at 11:25 am #1155539
    force-media

    Hi 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,
    Frank

    November 12, 2019 at 7:16 am #1155845
    Ismael

    Hi,

    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,
    Ismael

    November 12, 2019 at 1:02 pm #1155990
    force-media

    Hi 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,
    Frank

    November 14, 2019 at 5:26 am #1156639
    Ismael

    Hi,

    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.