Reply To: CSS for Woocommerce

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