Shop page and some other display bits

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 9 replies, 2 voices, and was last updated 7 years by David Martin – Support.

Viewing 10 posts - 1 through 10 (of 10 total)

Back to forum

Posted in: Atelier
March 9, 2017 at 2:27 pm #316601

markmuz
Member

Post count: 94

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.

March 9, 2017 at 2:30 pm #316607

markmuz
Member

Post count: 94

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.

March 13, 2017 at 11:47 am #316966
David Martin – Support
Moderator

Post count: 20834
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;
	}
}
```
March 18, 2017 at 6:32 pm #317609

markmuz
Member

Post count: 94

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.

March 20, 2017 at 3:23 pm #317748
David Martin – Support
Moderator

Post count: 20834
4) Test this please:
```
.product figure:hover .cart-overlay {
    display: none;
}
```
6) You have removed that now:
March 22, 2017 at 12:58 pm #318052

markmuz
Member

Post count: 94

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.

March 22, 2017 at 1:00 pm #318056

markmuz
Member

Post count: 94

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.

March 24, 2017 at 6:33 pm #318453
David Martin – Support
Moderator

Post count: 20834
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?
March 27, 2017 at 1:31 pm #318609

markmuz
Member

Post count: 94

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?

March 29, 2017 at 10:51 am #318934
David Martin – Support
Moderator

Post count: 20834
7) You would use the CSS hover property. Ref: https://www.w3schools.com/cssref/sel_hover.asp
```
#footer-widgets input[type="submit"]:hover {

}
```
Back to forum

Posted in: Atelier