Formatting "Astrid:Projects" Widget (Centering/Spacing)

Hello,

Thank you for the very beautiful theme.

I have a small number of projects I wish to display, but they are all showing on the left side of the window and are stuck together.

I would love to have space between the projects, and for them to be centered in the window.

I haven’t been able to find any documentation or support threads that helped me achieve that. Is this an option in Astrid?

Thank you so much.

Hello @questions,

Can you please provide a link to your website in order to let me inspect it?

Kind Regards, Roman.

The test website is: http://SupportiveRelationships.org/med

Thank you for your prompt reply.

Okay @questions,

I have just checked your website, but I don’t see any projects in your projects widget. Did you add projects?

By the way, Astrid Documentation is available here:
https://athemes.com/documentation/astrid/

Kind Regards, Roman.

I apologize - I had been playing with different options, and you must have visited the site just when the projects section was empty. It is up again (titled “Services” in the text, immediately after “Introduction”) and I will leave it up until you have a chance to look at it.

Thank you for the link. I have seen it, but didn’t find in it an answer to my question.

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (min-width: 992px) {
    section.atframework_projects_widget div.project {
        width: 50%;
    }

    section.atframework_projects_widget div.project > div.project-thumb > img {
        width: 100%;
    }
}

Kind Regards, Roman.

Thank you! This centered the images, but they are now huge and still have no space between them.

Is there a way to center the content of the entire projects section and have some buffer between the images, while retaining the original size of the images?

Please try this instead:

@media only screen and (min-width: 992px) {
    section.atframework_projects_widget div.project {
        width: 50%;
        padding: 0 10%;
    }

    section.atframework_projects_widget div.project > div.project-thumb > img {
        width: 100%;
    }
}

Please note that this code will work for 992px of width and more to keep widget responsive.

Kind Regards, Roman.

Perfect! Thank you so much. :slight_smile: I am grateful for how quickly you replied.

You are welcome!

By the way, it would be nice if you leave your feedback for Astrid theme on WordPress.org, here is a quick link :slight_smile:

Kind Regards, Roman.

Hello !

I used code from above and it works perfectly. But not on mobile browser. I need to increase the height of each project to show all the text which is a short description about each project.
Is there a way to make each project a little bit bigger on smartphones to show all the text?

Link: http://knpb.edu.pl/

Hello @downbeatt,

That code doesn’t work on mobile intentionally, I mentioned purpose above. Can you please create a new topic for your question with explanatory screenshots?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

Hello,
i’m writing here since i have a similar problem; i would like to center the project widget that by default is left centered for all the media resolutions.
I’ve tried to play a bit with the style.css file with no luck unfortunately; i have two separated project widgets (one with 3 projects and one with 6 projects) and they behave differently with the tests that i’ve made.

I’ve found an old post where the problem has been solved but the solution is not reported in it :wink:

thanks

Hello @snoze88,

Can you please create a new topic for your question with a link to your website?

Kind Regards, Roman.