-
Hi there,
I spent huge amount of time on this, but couldn’t get it working properly, hence I need support.
I need a image to be displayed on the 1st of the 2-column layout. I’ve tried to read the forums, but I can’t figure out how to do it.
Currently in desktops are showing Tiny images, while on mobile the images are Huge:
I hope you can guide me how to achieve this. I’d appreciate a quick 5-min video call to address this issue.
Thank you in advance.
-
Hi there,
unfortunately we don’t do calls/video calls in support.
But lets see if we can resolve the issue.
Select one of your Grid Blocks and open the List View in editor
https://wordpress.org/documentation/article/list-view/You will see the grid and contents looks like this in the list:
Grid Block ---- Container Block #1 ---- ---- Image Block ---- Container Block #2 ---- ---- Headline Block
In Desktop preview
Select Container Block #1 and in the settings set its Width to 30%.
Select Container Block #2 and in the settings set its Width to 70%.Note that the 2 columns widths add up to 100%.
Now switch the editor to Mobile preview
Select Container Block #1 and in the settings set its Width to 30%.
Select Container Block #2 and in the settings set its Width to 70%.Try that and let me know
-
Hi David, I’ve updated it, but now both desktop and mobile views show huge images. Can you please suggest the ways of containing them to a smaller image? The only option I see is to use the thumbnail view.
Thank you. -
Couple of options:
Option A – using the grid block layout that you have.
Adjust the % widths of Column #1 and #2 eg. 15% and 85%This will mean the images do resize as the screen resizes.
Option B – replace the Grid Block with a Flex Layout.
In place of the Grid Block layout you would, build the following layout:Container Block #1 ---- Container Block #2 ---- ---- Image Block ---- Container Block #3 ---- ---- Headline Block
Container Block #1 set its Layout > Display to Flex, and Column Gap to 16px.
Container Block #2 set its Layout > Flex Child:
Grow: 0, Shrink 0, Basis: 50px;
Image Block set its Width to 50px
Container Block #3 set its Layout > Flex Child:
Grow: 1, Shrink 1What this will do is keep the first column and the image set to a fixed 50px on all screen sizes. You can set that value to whatever your require
-
Hi David,
What would be be best to convert the Grid layour with Flex layout? Or do I need to rebuild everything?
Thanks.
-
No worries, I just did the 1st option. Thank you again, David.
-
Glad to hear that worked !
- You must be logged in to reply to this topic.