Docs

[darkmockeray]

I want to create something similar to the attachment. Ive been trying with blockgrid in cornerstone by changing the margins, padding etc, but i cant seem to get the 2 images diagonally corner to corner and the text to stay in the middle. It would be great if it could work full width responsively too! I was hoping i could use essential grid instead but there doesnt seem to me an option to have a grid space for text, unless ive missed something!

Thank you

[darkmockeray]

attached

[Joao]

Hi There,

I believe the best would be to simply use 2 rows of 2 columns with marginless columns and no container on the row.

Responsive wise it is a bit tricky, because the images won´t stack as you would like, so you will need to build two layouts one for mobile and tablets and another for laptop an desktop.

I have uploaded here a CS template for you, so your life get started easier. Go to Cornerstone Click Templates and Upload it 🙂

It is from one of my personal websites.

Hope it helps

Joao

[darkmockeray]

wow thats amazing thank you so much! 🙂

Ill have a tinker round with it now….

[Rahul]

Glad we were able to help you.

Feel free to ask us again.

Thanks!

[Rahul]

Glad we were able to help you.

Feel free to ask us again.

Thanks!

[darkmockeray]

Hello Joao,

The images in the templet do not stay centered when the browser is changed in size. How can i make them stay centered. I have a graph in one and it goes off to the side…

Thank you

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– Specific page where you are facing the issue.
Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[darkmockeray]

Im working off mamp…

[darkmockeray]

also is there a way of keeping the heights of the images constant?

[Friech]

Hi There,

In that case please provide us the page template (.csl) and the images that you’re using. And customizer settings as well.

Thanks.

[darkmockeray]

This is the image that is causing the problem… i want it to stay centered so the graph is not cut off.

Also the height of the images changes based on the amount of text beside it. is there a way of making the height of the image constant?

I got this template from Joao btw

Thank you

Im just trying to figure out how i get the customizer settings

[darkmockeray]

.csl

[darkmockeray]

What i really want to achieve is to have the images diagonally touch corner to corner, but i want the aspect ratio of the images to stay constant (16:9 or whatever), they will incease and decrease in size when the browser is resized but noe of the image will be cut off.

How can i achieve this?

Thank you

[Joao]

Hi There,

If you download the template provided above and apply to your page you will notice it behaves like this.

The main points are.

Click on the magnifying lens of your row. Turn off Column Container and Marginless columns.

On the column where you want the image you will add the following line to the STYLE BOX (on the bottom of the column)

background: url('http://www.magoulart.com.br/wp-content/uploads/2016/09/Poa-Imobiliario.jpg'); background-size: cover;

You will obviously switch for your own image url.

You can see the image I used here: http://www.magoulart.com.br/wp-content/uploads/2016/09/Poa-Imobiliario.jpg – use it as a template for the size if you want.

But the size of this images will also depend on the amount of content you have on the other column(content column on the side of the image column) and the way to get it right is by testing and re-sizing your browser while doing so.

Once again, if you use the block it will work.

Let us know if you need further assistance.

Joao

[Author]

Posts