space between products and widget

Hello, I would like to give more space between the products, not in width but in length vertically so that it is not so close to the products below, how can I adjust it?

2-I also have a problem with the display of a social media icon widget in the footer, which appears fine on all pages except the store page, which appears in colors, how could it be adjusted on all pages? is shown in black and white like at home.

Attachments:

You must be logged in to view attached files.

Hello,

1. Check the code below for help:

.archive .product-grid-item {
    margin-bottom: 20px;
}

2. May I disable 3rd party plugins for testing?

Kind Regards

.archive .product-grid-item {
margin-bottom: 20px;
}

Should I put this in the custom css field?

I was also going to tell you 1- that in the CELL PHONE VIEW where the related products appear, the title is very close to the previous section, how can I give it more space?

2- And in the tablet view, if everything appears stuck together, I just want to give it more space because everything looks very stuck together.

Attachments:

You must be logged in to view attached files.

Hello,

Yep, put the code in Theme Settings -> Custom CSS.

1. Add the code below in “Mobile CSS” area to make more space:

.single-product .related-and-upsells {
    margin-top: 50px;
}

2. Edit that element via page builder and add appropriate spacing here – https://take.ms/UKK21

Kind Regards

Hello, thank you very much for your help, the adjustments are now done…

Finally, how can I make the banners reach the top of the screen and the menu stay inside the banner?
Just like in the example I attached?

thanks

Attachments:

You must be logged in to view attached files.

And could you also please confirm the size of the home banners (slides) for each visualization so that they have a perfect fit?

Computer size:
Tablet Size
Mobile size:

The larger the screen, the banner view is cut off 🙁

Can video also be used?

Attachments:

You must be logged in to view attached files.

Hello,

1. You need to enable the “Overlap” header to make such an appearance – https://take.ms/O8V8G

2. In the settings of the slider itself, define the right image for each device here – https://take.ms/WERsx

Kind Regards

Hi, luke…

1–>I tried to put the full view of the banner (overlap) but it does not change the color of the menu letter to white and I don’t know where I could modify it? I checked the typography and there is no option to change the menu letter with all its white icons.

-The bar (sticky header) should be kept the same as it is, since if the color of the main menu font is changed to white it should appear black in the (sticky header)

There is also a separator line in the banner, how can I eliminate it?

2–> I checked the tablet view of the store and there are no spaces between products, at home they are fine, it is only in the store in the tablet view, and I would not know where to modify the store directly

Finally, there are no specific measurements for the different views? I know where to change the views of the banners but sometimes I see that the measurements are a little bigger or very small

Thank you very much for your prompt help and the store is looking much better with the changes made
—————————–

Attachments:

You must be logged in to view attached files.

Hello,

1. You can change the color scheme in the settings of the Header builder – https://take.ms/DrZo0

2. Add a space value in Theme Settings here – https://take.ms/VNOcN, then it should work well.

Please send some screenshots of measurements that are a little bigger or very small for banners.

Thank you for your time.

Kind Regards

Hi Luke,

Thank you very much for your help, the styles turned out very well, little by little we have learned to configure Woodmart in more detail, one last thing that is not very clear to me…

The initial menu was left with (Header Base Overlap Dark) that is, a menu with white text and sticky header with a black background and white text.

Is there a way for only the sticky header to be displayed with a white background and black text?

Attachments:

You must be logged in to view attached files.

Hello,

Try to use the code below for help, define it in Theme Settings -> Custom CSS.

.home .whb-sticked .whb-general-header {
    background-color: #fff;
}

.home .whb-sticked .whb-general-header .wd-header-main-nav li a span,
.home .whb-sticked .whb-general-header .wd-tools-element a {
    color: #333;
}

Kind Regards

Thank you very much, from what I see the effect of the white color in the sticky header is only reflected in the home page, in the rest of the pages it continues to display black

Hello,

Then try to use the below one code:

.whb-sticked .whb-general-header {
    background-color: #fff;
}

.whb-sticked .whb-general-header .wd-header-main-nav li a span,
.whb-sticked .whb-general-header .wd-tools-element a{
    color: #333;
}

Kind Regards

[Author]

Posts