Docs

[SoNu Websites]

Hi,

I would like the columns & the images placed in them, used on my homepage to appear equally without any spaces.

It should like like this;NC SS.jpeg

Not like this;NC SS3.jpeg

Also how do I stop this so he columns are accurately equal; NC SS2.jpeg

[SoNu Websites]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! Yes, you can do that. Let’s select the ROW and enable Marginless Columns and disable Column Container – http://prntscr.com/a374kb

Hope this helps.

Cheers!

[SoNu Websites]

Hi I already had those settings in the way you advised. Is there another way?

[SoNu Websites]

Actually it seems to have resolved itself now. However the slight over or undersizing is still visible, any suggestion? Can’t ignore the details in good design 🙂

[SoNu Websites]

Also, is there a way to make the image fill the whole column to remove the empty white space above the text below the grey images?

[Nabeel A]

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;
}

Let us know how this goes!

[SoNu Websites]

Thanks a bunch all sorted now.

[SoNu Websites]

Hi, I replaced the text element with a custom headline element and the white space reappeared. How do I fix this?

Also upon checking the view in different devices (using the cornerstone view) columns do not resize nicely is there a way to fix so it’s appears better?

[Joao]

Hi There,

The columns do resize nicely, it is about the way you are designing it.

Why don´t you use this images as background images and set 13% padding top and 13% padding bottom to each column? If you are going to use solid colors you dont need to use image as background you can simply select a background color.

Hope that helps

Joao

[SoNu Websites]

They are only temporary images so I can test out what size the actual images need to be.

They need to remain 3 separate images as they will be promoting 3 separate services that will link to different pages, I can’t see how I could do this as backgrounds.

If they are resizing nicely then why do they appear that way, un-centered, in the screen shot?

[Friech]

Hi There,

Thanks for the clarification. The images has an inline height and width property. And it is not equal with a 1px of discrepancy.

Did you manually add this properties? Because the image element of X|Theme does not have this properties inline. This is also the reason why the images did not resize on mobile.

Removing those properties will make your images equal, as they have the same size naturally.

Hope it helps, Cheers!

[SoNu Websites]

Hi, no I haven’t added any properties, I don’t even know where or how I would do that. Never used developer tools. I’ve just installed X & worked on the site via Cornerstone and set the layout via appearance > customise. I added some css from previous advice given in this thread also.

[Friech]

Hi There,

A plugin might be causing that. Please do a test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

[SoNu Websites]

Hi, I only had 2 or 3 plugins. I deactivated the SEO plugin but left Jetpack & the backup plugin activated as I assume X should be compatible with those!

See attachment – I bought x as I wanted to create this effect.

[Author]

Posts