Docs

[Richard H]

The more I use X theme the more I like it! Thanks!!

I am wanting to set up 4 rows that are all 50/50 split down the middle, full width and marginless. I want text on one side and image next to it. I am almost there but the size of the images seems to vary as does the amount of text in the box next to it and I can’t for the life of me get the rows the same size so they fit the text and image without any white gaps.
I hope you understand my problem and have a way of fixing it.
Thanks

[Richard H]

This reply has been marked as private.

[Christopher]

Hi there,

Thanks for writing in!

Is this a draft page? since I get 404 error. Please publish the page or provide us with login credentials.

Thanks.

[Richard H]

This reply has been marked as private.

[Thai]

Hi There,

Try adding the following CSS under Customizer > Custom > Global CSS:

.page-id-56 .x-column.x-sm.x-1-2 .x-img img,
.page-id-56 .x-column.x-sm.x-1-2 .x-img {
    width: 100%
}

Hope it helps 🙂

[Richard H]

Looks great on my laptop but when I make the screen smaller the alignment goes off again. I want the page to look good on all platforms and at the moment it only looks good when the screen is big and when the screen is medium or small there are gaps everywhere. Any other ideas how to fix it? Thanks

[Christopher]

Hi there,

Instead of adding image element, please add image as column’s background, to do so add following code in column’s style field :

background-image: url(https://www.sheffieldwellnesscentre.co.uk/wp-content/uploads/2017/02/massage-therapy-sheffield-575x400px.jpg);background-repeat: no-repeat;background-size: cover;

Hope it helps.

[Richard H]

That looks fine on the laptop but as soon as I shrink the screen down to anything less than half my screen it breaks down. I tried adding a “gap” section in the first image of the yoga mats to see if that would make any difference but all that did was to put in a big white space on smaller screens.
I have attached a screencast to show you how it looks at my end…

[Richard H]

This reply has been marked as private.

[Lely]

Hello Richard,

Thank you for the video.
Try adding border: thin solid transparent; on the style field of the column with image.
After that, there will be a little gap still. That is because of the headline default top margin. We can add a class reset-top-margin on the headline class field. Then add this CSS:

@media (max-width: 767px){
.reset-top-margin{
   margin-top:0 !important;
}
}

Hope this helps.

[Richard H]

I have now done all that and the end result is the same….looks fine on desktop but the majority of the image is missing when I shrink the screen size

[Paul R]

Hi,

Please add min-height: 440px; in the style field of your columns where your images resides.

Hope that helps.

[Richard H]

We are very nearly there! There is now the image there (thanks for that!) but there is a white border at the bottom of the image as you can see in the image below. If that could be removed i think we will be there

[Richard H]

This reply has been marked as private.

[Paul R]

Hi,

To get rid of it, you can add this in Cornerstone > Settings > Custom CSS

@media (max-width: 767px) {
	.x-section .x-column {
		overflow:hidden;
        }
}

https://www.screencast.com/t/UIPW7GRa

Hope that helps.

[Author]

Posts