I have 3 columns inside one row without margins or padding (it goes edge to edge). In the left-hand corner I have an image I want to keep consistent and build everything else relative to it on different screen sizes. How do I do that?
Currently, the column (and horizontal image inside it) reduces size much faster than the text columns. I’d like that to be reversed. What settings are needed to prioritize that and where do they need to be implemented?
Hello @kbistudio,
Thanks for writing to us,
In case you want to have a different column layout for the different screen sizes, I would suggest you go to the Row—>Layout—>Click on the Template -->Set the column layout as per your design.
In case you want to reverse the column, I would suggest you go to the Row—>Layout —>Click on the Directions —>Select Reverse for each device.
In case you are pointing to something else please let us know.
Thanks
I’m sorry, that doesn’t fully address my question.
I’m asking about how to prioritize a specific column – more specifically, the image inside it – to be full length, whatever the screen size is.
I’ll try asking another way.
Can you make an image fit-to-fill the entire column and change crop and size as needed when the screen size is changed?
Does that make the question more clear?
Thank you for your help.
For a visual reference, here’s the gap I’m trying to avoid…
And what I’d trying to achieve consistently, even at smaller sizes.
But I don’t know what settings to set to get those end results (or even the proper language to use to further the goal). Please advise. Thank you.
Hello @kbistudio,
If you use the Image element inside the column, the Image will just automatically changes its width as wide as the column width. As for the height, it automatically changes as well relative to the width of the Image. That is why you will probably see some empty spaces below the Image element. If you want the image to fill the whole column, you have to make it as a background image. Even then, you still need to compromise parts of the image because it will surely be zoomed in or cut off. I would highly recommend that you check out these videos to fully understand how background images works:
And for more reference:
Best Regards.
This is great! Thank you.
In trying to implement a background image into a column via the instructions from the videos, I’ve run into a snag.
Background image is there, but isn’t there.
I tried clearing the section purple background color to transparent. No change. I tried to reinstating the section background to purple and no change. What am I missing?
Hey @kbistudio,
Your screenshot and description does not provide us details or context of the issue. Please provide the following information in a Secure Note
You can find the Secure Note button at the bottom of your posts.
Thanks.
Hi @kbistudio,
I have created a test page with the same content and added the background image as suggested by my colleague and also added a Gap element to adjust the space into it. The image works as you are expecting and no space is shown.
Please check the test page URL in the secure note and replicate the same wherever required.
Hope it helps.
Thanks
Thank you! I’m not sure why it didn’t work before. It’s working now. Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
