-
RogerSM
My site’s blog cards currently look like this
https://smjune523stg.wpengine.com/blog/
Ideally, I’m like them to look like this
https://ordinary-posterity-472010.framer.app/blog-1
And explained here:
https://drive.google.com/file/d/14ZRie3CbCsSCG_wDQUC4PsJuyPD3ML4K/view?usp=drivesdk -
You are currently using background image as the featured image, you need to change the structure to something like this:
- Container A -- GB image block (enable its dynamic data option, set to featured image) -- Container B --- GB headline (enable its dynamic data option, set to list of terms, category ) --- GB headline (enable its dynamic data option, set to Title) --- GB headline (enable its dynamic data option, set to Excerpt)
Rounded corner:
Set the image’s top left and top right border-radius to 20px.
Set Container B’s bottom left and bottom right border-radius to 20px.Shadow effect:
This requires GB Pro plugin. Otherwise, CSS is required. Once you finish the structure, we can help with that. -
RogerSM
Hello. I’ve made some progress (!) but there’s something off because the container B content is being displayed to the right of the image instead of underneath it:
https://smjune523stg.wpengine.com/blog/
Here’s a screenshot of the structure I have:
https://drive.google.com/file/d/1fY_I9KyzZ0TnyCdXsuB5uhLbmYP4dI70/view?usp=drivesdk -
RogerSM
Still hoping someone can help with the issue above. Thanks.
-
Fernando
Hi Roger,
Can you set the flex-direction of the Parent Container Block holding everything to
column
?Reference: https://docs.generateblocks.com/article/layout-options-overview/#flex – check the direction section.
-
RogerSM
Thanks, that did it!
I do have one more technical follow-up question though. If you look at the page here https://smjune523stg.wpengine.com/blog/ on a desktop computer, the height of each card varies depending on the dimension of the photos and the length of the blog title. Ideally, the cards would all be the same height.
Is there a way to set the thumbnail images so that they all have the same dimensions, for example 4:3 or 16:9?
-
Ideally, the cards would all be the same height.
Then you need to make sure the images are same height first.
You can set height value for the images.These 2 articles should be helpful:
https://docs.generateblocks.com/article/equal-height-grid-containers/
https://docs.generateblocks.com/article/vertical-alignment-of-content-in-grid-container/ -
RogerSM
Thanks, Ying!
-
No Problem 🙂
- You must be logged in to reply to this topic.