[stevan021]

Hello Sakin 🙂 .

I wanna make my new site close to this one I made in Shoppify: http://cheapsafegold.com/
My new site: http://test.cheapsafegold.com/ . I am using Catch Responsive theme.

First problem I’d say is the shop: http://test.cheapsafegold.com/?post_type=product
Pictures are way out of line and there are “read more” and “add to cart” buttons I wanna remove. I want to have 5 products in 1 line , and other 5 in 2nd line like on the first website ( http://cheapsafegold.com/collections/all ).

Second thing that may be impossible but doesn’t hurt to ask is if you know if there’s a way to make the border of the site (not background) bigger so it encompasses my “cheap safe gold” logo as well. Basically, I don’t want to see background behind my logo.

Any help would be greatly appreciated.

Best regards,
Stevan

[Sakin]

1. You can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

@media screen and (min-width: 769px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        margin-right: 2.5%;
        width: 18%;
    }
}
.woocommerce.post-type-archive-product a.product_type_simple { display: none; }

2. Sorry I don’t understand this one. As I see your logo set fine.

[stevan021]

Okay. That removed the buttons but all five products couldn’t fit in 1 row so it goes like this: http://prntscr.com/7aq38d . Could you delete the parts I squared in red?

[Sakin]

@stevan021:
1. For 5 products in line. Replace the following previous css:

@media screen and (min-width: 769px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        margin-right: 2.5%;
        width: 18%;
    }
}

With the following css:

@media screen and (min-width: 769px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        margin-right: 1%;
        margin-left: 1%;
        width: 18%;
    }
}

2. To remove that from screenshot, add the following css:
.woocommerce-breadcrumb, .woocommerce-result-count, .woocommerce-ordering { display: none; }

[stevan021]

Wow that worked great. Thanks a lot Sakin.

Let me clarify on the 2nd one. The start of the page on my old website looks like this: http://prntscr.com/7aw675. Notice how the black “background” extends beyond the logo. On wordpress here : http://test.cheapsafegold.com/ if I change the background to be some picture the logo would get “lost” in it. I want to make the black circled background extend to the part of the site where the logo is- if that’s possible?

[Sakin]

@stevan021: I am not sure if I understand you correctly. But if you want to add background color just in logo then you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

#site-logo {
    background-color: #000;
}

[stevan021]

Okay I changed my site background so it makes more sense. I want the black background to be behind my logo: http://prntscr.com/7bf24o

[stevan021]

Basicly I want the backgrund in the green area to be black

[Sakin]

@stevan021: Then you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

#masthead {
    background-color: #000;
}

[stevan021]

Thanks a lot. That worked perfectly. How do I delete these empty parts of page so that my text is everywhere?

http://prntscr.com/7cr58c

[Sakin]

@stevan021: For that you need to use “No Sidebar, Full Width” layout option which is there only in Pro version. For free version, again you need to adjust with custom css. So, add the following css:

.no-sidebar.content-width #main {
    width: 100%;
}

[Author]

Posts