Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #58521
    stevan021
    Member

    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

    #58543
    Sakin
    Keymaster

    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.

    #58553
    stevan021
    Member

    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?

    #58574
    Sakin
    Keymaster

    @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; }

    #58582
    stevan021
    Member

    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?

    #58608
    Sakin
    Keymaster

    @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;
    }
    #58652
    stevan021
    Member

    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

    #58657
    stevan021
    Member

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

    #58705
    Sakin
    Keymaster

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

    #masthead {
        background-color: #000;
    }
    #58867
    stevan021
    Member

    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

    #58868
    Sakin
    Keymaster

    @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%;
    }
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘General help with some stuff’ is closed to new replies.