- This topic has 5 replies, 3 voices, and was last updated 1 year, 11 months ago by Fernando.
-
AuthorPosts
-
April 2, 2022 at 7:02 pm #2176072Heath
I have a roster type post that I am making for multiple teams and I’d like to have a smaller profile picture for each player right and then their name right beside it with the stats right underneath. How do I make a smaller picture rather then the large images?
I have included a screen shot where I’d like to place the photos and moving the names to the right of the photos.
April 3, 2022 at 1:23 am #2176232DavidStaffCustomer SupportHi there,
add as Image Block before the Player name and give it an Advanced > Addtional CSS Class of
player-photo
Once thats in place – share a link to the site where i can see the image, player name etc. and ill work on the CSS to align them how you need.April 3, 2022 at 12:23 pm #2176742HeathI added a photo. I also added the link in the private information.
Would there also be s way to remove the caption under the pictures on this post only?
April 3, 2022 at 6:24 pm #2176946Fernando Customer SupportHi Heath,
Kindly leave this blank to remove the caption of the image: https://share.getcloudapp.com/jkuv4YO7
With regards to the look you’re going for, this can easily be achieved through a Grid Block with GenerateBlocks plugin: https://share.getcloudapp.com/YEurOQ4B
Kindly see: https://share.getcloudapp.com/DOu4BoP0
Also see: https://share.getcloudapp.com/DOu4BoP0
Alternatively, if you add CSS class
player-photo:
https://share.getcloudapp.com/bLuKq05Q, you may also try this code:figure.wp-block-image.player-photo { float: left; width: 15%; margin-right: 20px; }
Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css
Adding this through additional CSS should work.
On mobile and tablet, it would look different, and we would need to use media queries to achieve a better look like:
@media (max-width: 768px) { /* CSS in here for mobile only */ figure.wp-block-image.player-photo { float: left; width: 40%; margin-right: 20px; } } @media (min-width: 769px) and (max-width: 1024px) { /* CSS in here for tablet only */ /* CSS in here for mobile only */ figure.wp-block-image.player-photo{ float: left; width: 25%; margin-right: 20px; } } @media (min-width: 1025px) { /* CSS in here for desktop only */ figure.wp-block-image.player-photo { float: left; width: 15%; margin-right: 20px; } }
If you use the code as opposed to GenereateBlocks, kindly replace the values to your preference.
Hope this helps! 🙂
April 19, 2022 at 5:57 pm #2194138HeathThanks
April 19, 2022 at 8:30 pm #2194200Fernando Customer SupportYou’re welcome Heath! Glad to be of assistance! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.