Docs

[tjburton]

Hi,

I’m currently making an ecommerce store using the Renew theme. I have made a few modifications so far such as removing the page titles and the space it leaves behind. However, I’ve inserted an image into the body that will act as a header but it creates white space around it that I’m trying to get rid of with no success. I don’t want any white space between the image I’ve inserted and the navigation above it, or any white spice between the image and the products below it.

Also, I’m trying to place the product name and pricing near the top and bottom of the product image rather than both being below the product image. I tried doing this using negative pixel margins but this doesn’t maintain it’s positioning once displayed on tablet or mobile views.

I’ve attached a screenshot to illustrate what I’m trying to explain. Hopefully that shows what I’m trying to get across.

Any help would be very much appreciated!

[Darshana]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[tjburton]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.home .x-container.max.width.offset {
    margin-top: 0;
}
.page-description p {
    margin-bottom: 0;
}
.woocommerce li.product .entry-wrap {
    margin-top: -65px;
    text-align: center;
}

Hope it helps 🙂

[tjburton]

Hey,

Thanks so much for the code, it solved 90% of the problem! The product title and price are both at the bottom now, but I’m happy to make that compromise and leave it there if it’s too awkward to get the title above the product image and leave the price at the bottom.

However, it’s pushed up the ‘Add to Basket’ option that pops up once you hover over a product image to a slightly awkward position. Is it possible to leave this where it was and allow it to just appear over the price and product title once its hovered over?

Also, one last issue!

.page-description p {
    margin-bottom: 0;
}

This fixes the margin under the banner image on my ‘Featured’ page but not on my ‘Products’ page for some reason. Is there any way to remedy that?

Thanks for your help so far, it’s very much appreciated!!

[Jade]

Hi there,

Please add this code:

.woocommerce li.product .entry-header .button {
    top: -45px !important;
}

Hope this helps.

[tjburton]

Thanks for your help! It’s completely changed my website and its hugely appreciated. I still can’t seem to fix the issue I’m having with my products banner though, is there any reason why this isn’t behaving in the same way that my ‘Featured’ banner is? (i.e. still a margin or padding there creating white space between the banner and the products.)

[Jade]

Hi there,

I tried checking your site but there is now a coming soon page active.

Kindly provide us with the admin access so that we can check and provide you with the suggestions.

[tjburton]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials.
Please remove the space between this content:

<img class="headerimg" src="http://79.170.40.230/tartanpanda.uk/wordpress/wp-content/uploads/2016/11/products_header_200px-1.png" alt="products_header_200px" width="100%" />

[recent_products per_page="12" columns="2"]

Since the content is autop, the image is wrap in paragraph tag. Paragraph tag has bottom margin by default.
Please update the content to this:

<img class="headerimg" src="http://79.170.40.230/tartanpanda.uk/wordpress/wp-content/uploads/2016/11/products_header_200px-1.png" alt="products_header_200px" width="100%" />

[recent_products per_page="12" columns="2"]

Hope this helps.

[Author]

Posts