Image to fill split screen container

Support
#1

Hi there

I have seen this post: https://theme.co/apex/forum/t/make-images-in-column-fill-complete-container/6089 but I can still not solve this issue.

I have a split section that I want the left half as the text (raw content) and the right side an image. The image however I cannot get to fill the whole container and there is a grey section beneath the image.

This screen shot should make this clear.

I look forward to hearing from you soon.

Best wishes,

Ali

#2

Hi @Primary_Pixels,

Thanks for writing in.

You could try this method below on how fix the problem.

Add the image as a background to the column then add a CSS in the style box.

background-size: cover;

Or you can try adding CSS max-height to the column or image style box.

If still not helping, please share us your URL and admin credentials so we could check yours setup closer.

Thanks. Don’t forget to set it in secure note.

#3

Brilliant - Many thanks.

#4

Hi there,

The content height and images that you used are very different and it is not possible to have full height images unless the image getting skewed:

But I used an alternative way. I went to each section and in the ROW settings added the vertical-center class:

Then went to X > Launch > Options > CSS and added the code below:

.vertical-center {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

Now if you see the about page the images are sitting at the center of the box and are better than before.

Thank you.

#5

Hi Christopher

Many thanks for your prompt response.

Is this due to the amount of text and image size do you think. I have used this split screen on the Home Page and What we Do page with no issue:

Do you think if I cut down the text a bit this could rectify the situation.

Thanks in advance.

Regards,

Ali

#6

Hey Ali,

Your split columns in the homepage may work but only in some larger screens. In a small screen, you get this:

The best way to do this which would be responsive enough is the suggestion of @Nico where in you add the image as a background image of the column.

Having the current layout, you only choice is to shorten the text a bit to prevent the total height of the column containing the texts much less then the height of the column containing the image.

Hope this make sense.

#7

HI there. I have tried putting the image into the column, but I can only get the image to appear across both columns. Could you possibly give me a more detailed step by step guide as I can’t get it to work.

Really appreciate your support.

Best wishes,

Ali

#8

Hi There,

You need to add the following code to the style box of your column.

The style box is at the very bottom of the cornerstone left tab once you click on your Column.

You need to add the URL to your own image.

background-image: url("http://example.com/dev/wp-content/uploads/2017/08/thinker.jpg");

This layout you want to achieve is pretty cool, but also pretty tricky, once you achieve what you are looking for , check how your site looks on mobile, I often chose to build different sections for mobile when building this type of layout.

Hope it helps!

#9

I think you might just have cracked it. I added the above code and then added a gap to that column which I set to the desired size. Certainly works on my screen, but I will have a look at smaller screens and devices.

Many thanks Joao - you are a legend.

#10

Glad we could help.

Cheers!

#11

Back to this problem I am afraid!!

The client has reported that the images on this page are being cut off on certain size screens. Any thoughts? Hopefully the screen shots will help.

On this size scree, the image displays correctly.

On the smaller, but probably more common sized laptop screen, the image of James on the right is cut off.

I have just turned these images off on the smaller devices as it looks too messy.

Again, further down the same page the profile for Rebecca has the same issue:

This is how it should display, but on the smaller screen she is starting to be cut off:

Looking back through some of your earlier suggestions, I have put the following code into the Style CSS box of the Column: background-image: url(“http://icanandiam.com.gridhosted.co.uk/wp-content/uploads/2017/09/james-shone.jpg”); background-size: cover;

This puts the image in no problem, but it does not solve the image cut off issue.

Again on this Section I have turned off the image on smaller devices.

Am I destined to fail on this bit of the site or do you have any other ideas? All login details are within this post in a Secure Note.

Hope you can help.

Best wishes,

Ali

#12

Hi Ali,

Please add to each image style box.

height: 100%; width: auto !important;

Let us know how it goes!

#13

Hi Joao

Thank you for coming back to me.

I have added your code to the style section of the column, but to no avail.

I have the image link in this section already - background-image: url(“http://icanandiam.com.gridhosted.co.uk/wp-content/uploads/2017/09/james-shone.jpg”);

When I try to add your code to the end of this code, the image disappears and the text centres itself across the whole section:

If I just try to add the image to the right hand column and then add your code to the Style section, no change occurs.

Any thoughts? This is beginning to drive me mad!

Many thanks for your efforts.

Best wishes,

Ali

#14

Hi there,

Please add it to your image’s style input, and not the column’s style input. It’s really a bit complex when working with image dimension while preserving the quality and aspect ratio. Adding alignment adds more to complexity :slight_smile:

The other solution is making the text responsive (scale down to maintain the height equal to the height of the image). Example.

font-size: calc( 13px + 0.5vw);

The 13px is the base size, while the 0.5vw is the responsive size which you could change.

Thanks!

#15

Hi Rad

Thank you for this.

Could you give me more detailed instructions as to where to add the height: 100%; width: auto !important; code?

I have not got an image added by the traditional means of an image element added to the right hand column. Instead I have the image added via the image url via the column style section that gives me this:

I then add a Gap to this column and set it to 865px to give me the full screen:

This is why I am unable to add the height: 100%; width: auto !important; code to the column section, or when I do it makes no difference.

The font-size: calc( 13px + 0.5vw); code when put in the Style section of the raw content does not solve the problem either.

Sorry to be a pain, but I’m still no further forward.

Any other thoughts?

Best wishes,

Ali

#16

Hi there,

Forget about that height: 100%; width: auto !important; and font-size: calc( 13px + 0.5vw); styling, it will be more complex due to the nature of background sizing. Instead, please add background size in your column style, like this

background-image: url("http://example.com/dev/wp-content/uploads/2017/08/thinker.jpg"); background-size: cover;

Since it’s a marginless column then that should be okay.

Thanks!

#17

Thanks Rad

I will try this tomorrow morning and advise.

Regards,

Ali

#18

Sure, and you’re welcome :wink:

#19

Hi Rad

Sadly no - still not working.

Large screen displaying correctly

Smaller Laptop size screen still displaying incorrectly:

I fear this is not going to get resolved.

Feel free to access the site and have a look. Login in Secure Note above.

Driving me mad now!!

Regards,

Ali

#20

Hi there,

It’s because of this existing CSS,

.vertical-center {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

This display: flex !important; to be specific. The rows and columns in the layout are initially displayed as a table, the columns are table cells, but you forced its parent with flex display. Which of course, affects its child columns sizing. You should remove that.

Thanks!