-
Afonso Alves
I’m having a problem with the element on my article recommendation site where sometimes the image doesn’t completely fill the element as shown in the image: https://prnt.sc/mmD3MouZQBA6
can you help me solve this problem?
-
Can I see the section in question?
-
Afonso Alves
Yes check private information
It happens with some images from articles on related article element
-
1. Set the image’s
width
andheight
both to100%
, andobject-fit
tocover
, the settings need to be done for desktop, and then remove all the values set fro mobile so it can inherit the values from desktop.2. Select the parent container of the image, set
min-height
to100%
, and add a CSS class to it, eg.container-image
.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/3. Select the root container, the
align-items
is set toflex-start
, change it todefault
.4. Now add this CSS:
.container-image > figure.gb-block-image { height: 100%; }
-
Afonso Alves
I tried to make the changes but didnt worked and now its more glitch… i need help can i give you temporary access im really confused
-
i need help can i give you temporary access im really confused
I see that you’ve done most of the steps correctly, you only didn’t do step 3.
The
align-items
option is in the layout panel, set it todefault
instead offlex-start
.
https://docs.generateblocks.com/article/layout-options-overview/#flexThe root container is the grandparent of the image block if that’s easier to understand π
-
Afonso Alves
Im still confused i cant find that option.
Can you send me a video recording?
-
Default means none of the options needs to be selected like the screenshot:
https://app.screencast.com/vXEkia1GZS4Wj -
Afonso Alves
I made the changes and now it looks like this: https://prnt.sc/A3P9vOMRxqg0
-
You did it to the wrong container, please revert it back.
It’s this one:
https://app.screencast.com/jW9md3pLL9rSs -
Afonso Alves
How can I now make it a little wider on mobile so it looks like this: https://prnt.sc/12pOQcMNjF8o
And leave it as it is on the desktop: https://prnt.sc/6ZiX9l65KxkX
-
You can change the
flex-basis
of thecontainer-image
container to50%
or60%
on mobile. -
Afonso Alves
Thanks have a nice day π
-
No Problem π
- You must be logged in to reply to this topic.