Campaign Issue

technova76

Hello
I have 2 issues in the Campaigns page.
1) When I put an amount in some campaigns, the corresponding template bar appeared. But it goes over the text.

2) In a campaign, I add a description in some photos. The problem is that while I select left alignment for the description, it doesn't accept it. And it also doesn't accept the space I give between the photos with their description.

*The red line I have in the image is the point where the second photo joins the description of the first. There should be a space.

saguaros

Hi technova76

1 - In the 'custom.css' file, look for this line of code:

.dt-donate-campaigns-list .dt-donate-mod-campaign-details {padding-bottom: 100px;}

you can increase this value as you wish.

2 - Could you share the URL of that page? I tried to view some campaigns on your site but can't see that description.

technova76

Shared...

saguaros

Hi technova76

Here is how it looks at my end: https://prnt.sc/uali0n

Could you share screenshot of how you want it should be?

technova76

The picture with its description is one subject. Imagine that you have the description in the photo. The next photo (or video) with its description, should not be stuck on the previous one.

And the text must have left alignment.

saguaros

technova76 Your screenshot looks the same with mine, could you share another screenshot of how it should be?

technova76

Look at the space between the second photo and the description of the first photo.

saguaros

technova76 I got it, you want to add space between each image, right?

You can try with this custom css:

.campaign-detail .campaign-description .campaign-description-text figure {
    padding: 10px 0;
}

and change the value to suit your need.

technova76

Thank you.
But the second with the third photo, has twice the distance, than the first with the second photo.

saguaros

technova76

With my above code, it will add padding to top and bottom of each image so the middle images will have its top padding and bottom padding of image before it.

You can change to this to add padding for bottom only:

.campaign-detail .campaign-description .campaign-description-text figure {
    padding: 0 0 20px 0;
}

I think you should understand a bit about for CSS, it will be easier and save time.

technova76

Thank you. According to the code, this is only for the campaigns. What about the articles? I have the same issue in articles too.
Should I use the same code, and replace the word "campaign" with the word "article"?

What about the alignment of the description?

saguaros

technova76 What about the alignment of the description?

You can define the alignment for it:

.campaign-detail .campaign-description .campaign-description-text figure {
    text-align: left;
}

technova76 What about the articles? I have the same issue in articles too.

You can share me the URL of that article, I will suggest further.

technova76

1) The code didn't worked.

2) https://piggybankaction.org/action/index.php/blog/14-environment/25-environmental-issues.html

saguaros

technova76

1 - I updated for you

2 - You should check the padding in 'custom.css' file line 238:

    .t3-content.col-xs-12 .item-page figure {
        text-align: -webkit-center;
        text-align: -moz-center;
            padding: 0 160px;
    }

and change the padding + alignment as you wish.

technova76

1) Fixed. Thank you.
2) The same thing I want to fix in the articles. The padding you gave me is for fixing the gray box of the text.

saguaros

technova76 I mean you can customize above css again as you wish

technova76

I've changed the padding number, but it reduce/increase the width of the gray box. I've changed the text-align to "left" instead of "center", and nothing happened.

What else should I do?

saguaros

technova76

I don't see your custom change there, anyway, try this one:

.t3-content.col-xs-12 .item-page figure figcaption {
    text-align: left;
}

technova76

I changed it, but I did not see anything being fixed and I restored it as it was.

Thank you for the code.

saguaros

technova76 I just tried to add the code and the text is aligning left now, kindly check.