Site logo

Archived topic

maybe a very strange question:

17 replies · Started by diedrich on December 4, 2020

Viewing posts 1–15 of 18

Hi there,

The photo album you are seeing in Charge is actually just blocks of blog posts.

It wouldn't work for a gallery.

Does that answer your question?

Thank you Leon ,
is there maybe another way to make it more beautiful? , for example like the caption flush with the left and right outside of the images and a line around it

Hi there,

try adding this CSS:

.gallery-item {
    margin-bottom: 20px;
}

.gallery-item .gallery-icon {
    overflow: hidden;
    padding: 0;
}

.gallery-item .gallery-icon img {
    width: 100%;
}

.gallery-item .gallery-caption {
    padding: 20px;
    background-color: #fff; /* caption background color */
    flex: 1;
}

@media(min-width: 769px) {
    .gallery {
        display: flex;
        flex-wrap: wrap;
        margin-left: -10px;
        margin-right: -10px;
    }

    .gallery .gallery-item {
        margin: 10px;
        width: calc(33.3% - 20px);
        display: flex;
        flex-direction: column;
        border: 1px solid #000; /* Set Border color */
    }

    .gallery .gallery-icon {
        max-height: 400px;
    }
}

thank you David, this is what I meant, maybe it is still possible to get a line around it (text and image)

greeting Diedrich

Hi David,
if I miss something?, where can I set the lines

diedrich

Hi Elvin,
I don't quite understand you, but do I need to install a plugin now?

I don’t quite understand you, but do I need to install a plugin now?

The link I've provided is a brief documentation guiding you on how to apply the CSS David provided on his previous reply. It's a good read. The information there is really helpful. :)

And no, you don't necessarily have to install a plugin if you follow this part of the guide.
https://docs.generatepress.com/article/adding-css/#additional-css

mmmmmm, this is a very short documentation that a normal person does not understand

mmmmmm, this is a very short documentation that a normal person does not understand

Ah right. I'll do a short step-by-step you can follow then:

1.) Copy David's CSS code provided here: https://generatepress.com/forums/topic/maybe-a-very-strange-question/#post-1568303

2.) Go to your site's Admin Dashboard page.

3.) On the Admin Dashboard page, Go to Appearance > Customize > Additional CSS
As shown here: https://share.getcloudapp.com/xQuYD8lL

4.) Paste it on the Code area you see on the Appearance > Customize > Additional CSS.

5.) Click "Publish". It should apply the CSS code David provided.

I wasn't that stupid yet hahahaha, I am concerned with how I can edit David's code to get a borderline around the image and text

I wasn’t that stupid yet hahahaha, I am concerned with how I can edit David’s code to get a borderline around the image and text

Oh, my bad. lol

Are you trying to achieve something like this?
https://share.getcloudapp.com/v1u4e8gm

If yes, you can add a border: 1px solid red; on .gallery-item.

Example:

.gallery-item {
    margin-bottom: 20px;
    background-color: white;
    border: 1px solid red;
}

yesaaaaaa, now a borderline above the text / below the image then it is completely ok

thanks Elvin

This archived topic is closed to new replies.