Hi.
I’m struggeling a lot…
Please look at attached screendump. this is made quite easy with Elementor. But I’m struggeling to make this with Cornerstone. Could you please help me?
All of the image is visible, and the image and grey background is filling up the browserwindow in width. I want the image and text to resize when adjusting the window.
Look forward to hear from you 
Regards Christian
Hello Christian,
Thanks for writing in!
Please insert a section, row and 1/3 + 2/3 columns. In your row settings, you will need to disable the “Inner Container” and enable the “Marginless Columns” option. In the 1st column, insert a column background image. And in the second column, please add some padding and your texts.
We would loved to know if this has work for you. Thank you.
Hi.
Thanks for your quick reply.
I know about the settings and options you are mentioning. And I’ve tried them out. Please look at the attached screenshots. As you see the picture isn’t square format – as the original. I want the picture to be square (and the whole picture visible) when adjusting the width of the browserwindow. I assume this is possible with som further settings or some css.
Look forward to hear from you again soon.
Regards Christian.
Hello Christian,
You may not be able to achieve a full square image. It just that background images depends on its container element. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always cover the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.
Yes, we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.
Yes, we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.
Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.
To better assist what you are trying to do, would you mind sending us the URL of the page that you are working on? Maybe we can give you some ideas on how you can have your background image as responsive as it could possibly be.
Thank you for your understanding.
Hi again.
Thanks for your reply.
Please look at this url; https://medbyggerne.idehus.net/testside/
Regards Christian
Hello Christian,
Your column set up is 1/3 + 2/3. Whenever you resize your browser, you will always get 1/3 + 2/3 columns. You cannot have a square image because as the screen size gets smaller, the height of the right column will become longer. Please understand that the height of the left column will also depends on the height of the right column.
Hope this explains it briefly.
Hi again.
Ok, but I’ve made a similar setup with Elementor quite easily. This is what I want to acchive with Cornerstone. Please look at this page; http://hushovd.idehus.net/test-kvadratisk-bilde/
Regards Christian.
Hello Christian,
You can also create this same kind of layout in Cornerstone. Here’s what you’ll gonna do:
Just make sure that your image’s height is longer than the height of your contents. The problem of this layout is that when the screen gets smaller, the height if the right column gets taller and when this happens, you will probably see whitespace underneath your image just like the image below:
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.