CSS for Woocommerce

This topic has 4 replies, 3 voices, and was last updated 7 years, 7 months ago by Wes.

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

Author

Posts
September 20, 2016 at 8:22 pm #19506
EmilyG
Customer
There is a woocommerce css folder in the theme files and this code
```
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: left;
    margin: 0 3.8% 2.992em 0;
    padding: 0;
    position: relative;
    width: 22.05%
}
```
is messing with the mobile layout. Can you help me write the code for the correct bit? If I remove it altogether it totally messes up the regular layout. Thank you!
September 20, 2016 at 9:14 pm #19522
kronos
Customer
Hi Emily,

Do you have a link to your site? Also, can you show me the section you are working on and what you’re trying to accomplish? That would help me (or anyone else reading) determine the best solution for this.

Also, did you do know you can remove all of the links to the CSS if you want to use the default WooCommerce CSS instead? If you do, I can show you how to remove that from your Child Theme. But I’d need to know what your plans are first before I give you the right advice.

I do know that WooCommerce has a couple ways to include or exclude certain files like the many CSS files registered with the Plugin. If you want to use the default Plugin’s CSS, you can, but you’d need to disable it from the Child Theme (which is easy to do thankfully).
September 22, 2016 at 10:31 am #19527
EmilyG
Customer
Sure, I looked up that info too and I dont want to disable the themes styles as there are a lot built into the theme that I need. I just dont know why that one line is making mobile look like garbage since there are mobile styles in the stylesheet too. I dont see any relevant to this particular theme, or the area of layout I am referring to, but there are some there, see below:
```
@media screen and (min-width: 673px) {
    .twentyfourteen .tfwc {
        padding-right: 30px;
        padding-left: 30px
    }
}
@media screen and (min-width: 1040px) {
    .twentyfourteen .tfwc {
        padding-right: 15px;
        padding-left: 15px
    }
}
@media screen and (min-width: 1110px) {
    .twentyfourteen .tfwc {
        padding-right: 30px;
        padding-left: 30px
    }
}
@media screen and (min-width: 1218px) {
    .twentyfourteen .tfwc {
        margin-right: 54px
    }
    .full-width .twentyfourteen .tfwc {
        margin-right: auto
    }
}
.twentyfifteen .t15wc {
    padding-left: 7.6923%;
    padding-right: 7.6923%;
    padding-top: 7.6923%;
    margin-bottom: 7.6923%;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .15)
}
.twentyfifteen .t15wc .page-title {
    margin-left: 0
}
@media screen and (min-width: 38.75em) {
    .twentyfifteen .t15wc {
        margin-right: 7.6923%;
        margin-left: 7.6923%;
        margin-top: 8.3333%
    }
}
@media screen and (min-width: 59.6875em) {
    .twentyfifteen .t15wc {
        margin-left: 8.3333%;
        margin-right: 8.3333%;
        padding: 10%
    }
    .single-product .twentyfifteen .entry-summary {
        padding: 0 !important;
    }
}
.twentysixteen .site-main {
    margin-right: 7.6923%;
    margin-left: 7.6923%
}
.twentysixteen .entry-summary {
    margin-right: 0;
    margin-left: 0
}
#content .twentysixteen div.product div.images,
#content .twentysixteen div.product div.summary {
    width: 46.42857%
}
@media screen and (min-width: 44.375em) {
    .twentysixteen .site-main {
        margin-right: 23.0769%
    }
}
@media screen and (min-width: 56.875em) {
    .twentysixteen .site-main {
        margin-right: 0;
        margin-left: 0
    }
    .no-sidebar .twentysixteen .site-main {
        margin-right: 15%;
        margin-left: 15%
    }
    .no-sidebar .twentysixteen .entry-summary {
        margin-right: 0;
        margin-left: 0
    }
}
```
The website is here. You will see what I mean when you go into mobile responsive mode in your browser (I use Safari). Once you delete that css style the layout is great, but only on mobile. If you go back to reg mode, everything is off.

That style is not inherited from woo commerce, it is coming from the stylesheet included with the theme: Optimal>Woocommerce>woo commerce.css
September 25, 2016 at 12:18 pm #19545
Wes
Moderator
@EmilyG Give me a sec and I’ll take at look at this.
September 25, 2016 at 12:38 pm #19548
Wes
Moderator
Ok, just got it fixed. I made a small update a while ago for all my WooCommerce themes and forgot to upload the one for Optimal. You can download version 1.5.1 with the fix in the WooCommerce CSS file. You could just swap out the CSS file for the new one, or you can just edit the file directly if you want. Here is the code that fixes it (I added it to the very bottom in the new CSS) –
```
@media screen and (max-width: 767px) {

	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		width: 48%;
	}

	ul.products li.product:nth-child(2n) {
    	margin-right: 0 !important;
 	}

}
```
There were some other minor adjustments I made as well, but it wasn’t anything major. You can use this to see if those changes are worth it or not – https://www.diffchecker.com/

If you haven’t made adjustments to this CSS file, then I’d just swap it out with the new version.

Let me know if that helps.
Author

Posts

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

You must be logged in to reply to this topic.