How to reduce the space between Product main image and short description

[Esperanz]

Hello X-Team!

I am using Icon on X

Could you pls. help me achieve this:

1- Reduce the space between Product main image and short description. In other words: I want to move the product main image to the right side, so that it can be centered with the galerie thumbnails.

2- How can I move the ‘‘Copyright’’- line completely to the bottom of my site?

Thanks for your help

[Prasant]

Hello Shikfina,

Thanks for writing in!

@Esperanz

Reduce the space between Product main image and short description.

Please add following CSS under X > Theme Options > CSS:

.woocommerce div.product .images {
    width: 30% !important;
}

.woocommerce div.product .summary {
    width: 68% !important;
}

If you would like to swap the position, please add following CSS:

.woocommerce div.product .images {
    float: right;
    width: 30%;
}

.woocommerce div.product .summary {
    float: left;
    clear: none;
    width: 68%;
}

@Esperanz

2- How can I move the ‘‘Copyright’’- line completely to the bottom of my site?

You can remove footer content from X > Theme Options > Footer.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[Esperanz]

Hi Prasant,

Thanks a lot for your reply.

Question 1: I’ve tried, but none of the codes did the trick.

Would you have another suggestion?

According to my question 2:
I do not want to remove the footer content. I want to move it completely to the end of the page.

Thanks

[ruenel]

Hello @Esperanz,

Thanks for updating us in!

1.) To move the footer completely to the bottom of the page, please remove this custom css:

.x-colophon.bottom {
    height: 5px;
}

This code limits the height of the footer which has caused an issue.

2.) Could you please add the custom css so that we can find out why it is not working for you?

Thank you in advance.

[Esperanz]

Hello RueNel,

Thanks for your reply.
1- I remove the custom css, but it just add more free space at the bottom of the page.

2- Here are the codes I’ve tried

@Prasant

Please add following CSS under X > Theme Options > CSS:

.woocommerce div.product .images {
width: 30% !important;
}

.woocommerce div.product .summary {
width: 68% !important;
}

If you would like to swap the position, please add following CSS:

.woocommerce div.product .images {
float: right;
width: 30%;
}

.woocommerce div.product .summary {
float: left;
clear: none;
width: 68%;
}

Thanks for your help!

[Esperanz]

2- I’ve add the custom css.

Thanks in advance again for your help!

[rad]

Hi @Esperanz,

Looks like you have added this custom CSS as well and it prevents the page scrolling, please remove it.

html, body {
    overflow: hidden !important;
    height: 100% !important;
    background: none;
}

1. “Reduce the space between Product main image and short description.”, the problem here is it’s not centered, so even though it has enough width, it just looks like it has a lot of space. The two containers are actually aligned with enough space

The theme CSS for the image is overridden by another styling, which is why the image is like that

And I compared it to our demo and my own installation, the image and gallery code is different. Have you added a custom code or plugin that alters Woocommerce gallery feature? That’s what needs fixing to make it closer to the summary and not the space.

2. “How can I move the ‘‘Copyright’’- line completely to the bottom of my site”, please add these CSS.

.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer {
    margin-bottom: 0px !important;
}
.x-colophon.bottom {
    padding-bottom: 0px;
}

Will result to this

Hope this helps.

[Esperanz]

Hi Rad,

Thanks for your help.

2. The css custom code did the trick. Thank you!

[Esperanz]

@Rad

html, body {
overflow: hidden !important;
height: 100% !important;
background: none;
}

1- My first question is not solved. I do not have these custom css. Would you mind checking my site?
I will send my site info in secure note

[rad]

Hi @Esperanz,

I couldn’t find it either, for that, let’s try adding this CSS to Theme Options > CSS

    .woocommerce-product-gallery__image.flex-active-slide a, .single-product .flex-control-nav.flex-control-thumbs {
     width: 100% !important;
     display: block !important;
        text-align: center !important;
    }

It should make the gallery thumbnails and the main image positioned to center.

Thanks!

[Esperanz]

@Rad

.woocommerce-product-gallery__image.flex-active-slide a, .single-product .flex-control-nav.flex-control-thumbs {
width: 100% !important;
display: block !important;
text-align: center !important;
}

Hey Rad,

The CSS works. You are a magician:smiley:

Thanks a lot for your help. I appreciate it!

Best regards

[rad]

You’re most welcome!