Shop page and some other display bits

[markmuz]

hey folks, please can you help me with the following:

1. See screenshot 1 – I would like to add some spacing at the bottom of the “Related products” items please.
http://testsite.thelevelcollective.co.uk/shop/camper-t-shirt-grey/

2. See screenshot 2. on my homepage (http://testsite.thelevelcollective.co.uk/) tablet size, there is a white gap that appears. Can you give me the CSS to get rid of this please.

3. On individual products I would like to disable the ability to zoom or open the images in a light box. In the Woo commerce settings, the choice seems to be one or the other, but I wish to have neither please.

4. On the all products page in the shop, I would like the hide the “Select options” icon and text please so users just click on the photo or text to go through to view the product

Attachments:

You must be logged in to view attached files.

[markmuz]

I ran out of options to upload images, so here’s one more little one

5. I’d like to reduce the spacing above the product name because it currently sits half way between the correct product and the one below. Can you tell me how to do this please.

Thanks for all your help. Painfully close to being able to launch now 🙂

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1)

.product-carousel.related-products.spb_content_element {
    margin-bottom: 60px;
}

2)

@media (min-width: 768px) {
	.home .spb_text_column {
	    margin-bottom: 20px;
	}
}

3)

.zoomContainer {
    display: none!important;
}

4)

.product-shadows .product figure .cart-overlay .shop-actions>* {
    display: none;
}

5)

@media only screen and (max-width: 767px) {
	.inner-page-wrap.full-width-shop ul.products>li.product-display-standard {
	    margin-bottom: 0px!important;
	}
}

[markmuz]

Hi David,

thanks for this help.

Though unfortunately, your response to number 4 didn’t seem to work. On my shop page (https://thelevelcollective.com/product-category/mens/), I still the “Select options” hover (see screnshot) is still there. Can you tell me how to get ride of this please.

Also, I have set the padding around my logo to be zero, yet there is still a lot of space around my logo which I would like to reduce. How can i do this?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

4) Test this please:

.product figure:hover .cart-overlay {
    display: none;
}

6) You have removed that now:

[markmuz]

5. thanks.

6. Oh no what device / browser are you viewing that on, it looks terrible. Mine looks as per my screenshot which looks fine, just a little too much space if anything…

7. Also, regarding the email subscribe button in the footer I tried doing inspect element as per your suggestion but I couldn’t find the name of the button class, only .mc4wp-form .mc4wp-form-15731 …but I wasn’t sure how to style the button, please can you just give me the class so i can change it and make it stand out because it currently just blends into the footer.

Attachments:

You must be logged in to view attached files.

[markmuz]

Also your answer to number 5 to remove the hover cart overlay was the same solution i was given last time and it doesn’t work.

See screenshot. I want the basket hover box and icon removing please

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

6) That was Mac + Chrome. Looks normal now:

To remove the padding you would use:

#logo.has-img a > img {
    padding: 0;
}

7) It would be:

#footer-widgets input[type="submit"] {
    color: red;
    border-color: red;
    background: blue;
}

—

5) This is likely because you have another CSS error causing this. Please validate your CSS: https://jigsaw.w3.org/css-validator/#validate_by_input

Do you refer to the test site or live site?

[markmuz]

ok thank you, with the css

#footer-widgets input[type=”submit”] {
color: red;
border-color: red;
background: blue;
}

what would the css be for styling the button when hovered please?

[David Martin – Support]

7) You would use the CSS hover property. Ref: https://www.w3schools.com/cssref/sel_hover.asp

#footer-widgets input[type="submit"]:hover {

}