Crafty main image overflow

[zenzino]

I am using the Crafty site as a starting point.

The main image has an overflow that displays to the right of the column: https://2hulbert.mysites.io

I swapped the image and text so the image is on the left side for another page: https://2hulbert.mysites.io/experienced-player/

I changed the Overflow to Hidden so it didn’t overlap the text (also left the Element CSS commented out on all pages).

How do I make the overflow go to the left of the column the same way the image overflows to the right on the first page?

Thanks for your help.

[ruenel]

Hello @zenzino,

Thanks for writing in!

Please edit the homepage and in the 1st Section element, find the “Customize” tab to see the inline Custom CSS. You should be seeing this:

@media (min-width: 767px) {
 $el {
   overflow: hidden;
 }
 
 $el .x-row-inner > .x-col:first-child {
   padding-top: 90px;
   padding-bottom: 90px;
 }
 
 $el .x-text {
   min-width: 23em;
 }

 $el .x-text.x-text-headline {
   min-width: 9em;
 }
 
 $el .x-anchor-text-primary {
   white-space: nowrap;
 }

 $el > .x-row > .x-row-inner > .x-col .x-bg {
   width: calc(100% + 8rem);
 }
}

You need to change the min-width: 9em; to something like min-width: 15em; to display your layout like this:

Kindly let us know how it goes.

[zenzino]

Hey @ruenel,

Thanks for the response.

I didn’t want the text to go over the image. I’m just concerned with the background image.

On the home page, the background image of the column overflows to the right of the column (width: calc(100% + 8rem).

On this page: https://2hulbert.mysites.io/experienced-player/, I’d like the background image overflow to go to the left of the column so it doesn’t overlap the text to the right.

[ruenel]

Hey @zenzino,

The current layout is designed so that the first column will overlap with the background image of the 2nd column. Do you want something like this instead?

You will need to remove the background from the Column element and then insert the background image in your Section element instead. The size would be 50% and positioned to the Right Center so that the background image will be on the right side.

For more tips and tutorials on using background images in your layout, you can check out these videos:

Best Regards.

[zenzino]

Hey @ruenel,

I guess I’m not explaining it correctly. Now I have visual aids.

On the homepage (https://2hulbert.mysites.io), the right column background image overflows to the right of the column.

It overflows past the right margin of the site. All good.

On another page (https://2hulbert.mysites.io/experienced-player/), I swapped the columns to give it a different look.

The overflow is still going to the right and I now overlapping the text.
What I’d like to do, is make the overflow go to the left so it is exactly opposite of the homepage.

This is what I am going for.

Thanks.

[ruenel]

Hello @zenzino,

To prevent the background image from overflowing, please click on the Section element and remove this custom CSS block in the Section’s inline CSS:

$el > .x-row > .x-row-inner > .x-col .x-bg {
    width: calc(100% + 8rem);
  }

Best Regards.

[zenzino]

Hey @ruenel,

I absolutely want it to overflow. I just want it to overflow to the left when the image column is on the left side like on the second page…

[ruenel]

Hello @zenzino,

If you want something like this:

Click the Row element and hide the overflow.

If this is not helping, please provide access to your site so we can check your element settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[zenzino]

Hey @ruenel,

Sort of… you have the image overflowing to the left of the column. How did you do that?

On the homepage (https://hulbertpiano.com) the element CSS (width: calc(100% + 8rem);) makes the background image overflow the column to the right. Why does it overflow to the right?

If I understood why it does that, maybe I can figure out how to make it overflow to the left on other pages.

On other pages, I want to swap the image and text and make the background image overflow to the left.

This is what I’m looking for (on this page https://hulbertpiano.com/professional):

[ruenel]

Hey @zenzino,

Clicking the Row element or even the Column element and then setting the Overflow to hidden should be enough to hide the overflowing of the background image.

Hope this helps.

[zenzino]

Hey @ruenel,

I really don’t know how to explain it any better. Please look at the example image I sent for the Professional page in my previous comment.

I do not want the overflow hidden. I like how it overflows to the right on the homepage. The homepage is exactly how I want it.

I just want to be able to swap the columns on other pages so the image is on the left side and the overflow goes to the left instead of the right.

Perhaps @prakash_s or @marc_a could offer a fresh perspective because we keep going round and round.

[ruenel]

Hello @zenzino,

Sorry for the confusion. I was focus on the overflow and not the direction where you want the overflow to display. By default, the background images are aligned to the left side of the container. In this case, it is aligned to the left side of the Column element. This setting is built into the theme styles.

If you want the background image to overflow to the left, the background image alignment should be changed to the right side. Thus, the custom CSS added in the Section element needs to be changed from:

$el > .x-row > .x-row-inner > .x-col .x-bg {
    width: calc(100% + 8rem);
  }

into this one:

$el > .x-row > .x-row-inner > .x-col .x-bg {
    width: calc(100% + 8rem);
    left: auto;
    right: 0;
  }

Be advised that custom CSS is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

The inline custom CSS added to the Crafty demo is for demo purposes. Any modifications to these custom codes that changes the look and feel of the demo layout is also considered custom development already.

Thank you for your understanding.

[zenzino]

Yay, @ruenel!

Thank you! You always come through for me.

I know you have a lot of people to help and I appreciate the time you put into this.

Thanks, again.

[prakash_s]

You are most welcome, @zenzino