Docs

[SoNu Websites]

I’ve changed the margin/column setting added CSS as per advice but it still shows up like this… see screenshot. Can anyone fix this??

[Joao]

Hi There,

Please add the following code to the Style Box of your image elements on Cornerstone:

width: 100%;

Please see img attached.

I also recommend you changing those solid color images for real ones at this point, even if they are not the final ones.

that is important so we can check if the images are distorting, what is not possible to check with the solid colors.

If it is distorting probably would be the best to adjust the height on the CSS provided before.

Hope that helps

Joao

[SoNu Websites]

Thanks very much. That worked & I’ve replaced the colour blocks with temporary images now. However I notice in the X demo stack http://demo.theme.co/integrity-1/ unlike my columns, the bottom of the demo columns do resize but they all stay aligned & resize together how can I change it to do the same? Is the header element preventing this effect?

Also I asked this previously:

Is there a way to remove the empty white space above the text below the images?

I was given this advice before but it doesn’t seem to be working now;

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.home #x-section-1 .x-column.x-sm.x-1-3 img {
max-height: 673px !important;
}
.home #x-section-1 .x-column.x-sm.x-1-3 h2 {
margin: 0;
}

[Joao]

Hi There,

Yes the header is preventing that the images sit on top of each other as on the Integrity one demo because the header is inside the same column as the images so, when the columns sit on top of each other there is the header there.

In order that you achieve a similar/same effect as on integrity one demo I can see 3 approaches.

1- To be the same as Integrity 1 Demo, there is one image as section background and every column has a different color on top than you can place whatever content you want on top and it will look the same.

2- You have poster images with the header already on the image, that meaning you use graphic software to create your images already with the title.

3- Which I think is the best on your case is to use background images on the columns, so you can add the content on top. For that you need to add the following code on the Column Style Box: background-size: cover; background-image: url("http://newcptcresults.sonuwebsites.com/wp-content/uploads/2016/07/3.jpg");

I have left your first column as an eXample. of this 3 method. I also gave a 10px padding on the left and right side so there is some spacing on the sides.

Hope that helps,

Joao

[SoNu Websites]

Thanks I’ll experiment with those options.

[Joao]

Hi There,

Let us know how it goes and reach us if you have any questions during the process.

Thanks

Joao

[Author]

Posts