Crafty Theme Personal Space area

Support
#1

I have been trying to learn this theme and I’m struggling with trying to center my image on the right column. It displays perfect on mobile devices but on laptop and computer screens it is shifted to the right cutting the picture in half.

#2

Hello Stephen,

I have checked the page, and the image seems centered on my screen. Could you send me a mock design or an example page of what design you are trying to come up with?

  • See the secure note below.

Thanks.

#3

what I see
what I see1413×706 141 KB
here is what I see

#4

This is what I am trying to accomplish

what I want to see
what I want to see1413×706 239 KB

#5

Hi Stephen,

That is because of this custom CSS:

  $el > .x-row > .x-row-inner > .x-col .x-bg {
    width: 100vw;
  }

I have removed it and fixed the layout for you. There is just one issue with this image. There are white spaces around your image. If you have other image that do no have white spaces around like a border, then we can achieve what you are trying to accomplish.

RueNel

#6

That works great for larger screens but now the image disappears on small screens like on the iPhone in portrait and landscape also IPad on portrait

#7

Hey Stephen,

I tweak some of the Row/Column settings. Check the page now.

Thanks.

#8

Perfect! thank you so much :blush:

#9

You are most welcome, Stephen.

#10

I messed up what you did and it reverted back to the way it was, can you tell me how you fixed it?

#11

Hey Stephen,

The custom CSS code needs to be removed.

image
image851×590 32.8 KB

Then tweak the Column settings like positioning the background image, setting the background image size and having a white background color.

image
image302×730 51 KB

When you are in the builder, you need to reload the page so that my changes will also be loaded in your browser. As soon as you make changes to the page and save them, it will not messed up the page.

Thanks.