Docs

[venya]

Hello,
I’m having some issues with some customization for mobile. I’ve tried a number of variation without success. Certain custom code like removing the author from blog posts work for desktop site, but suddenly its back in mobile.

Here are some things I need to change.

Shop Archive
1. Make product category title font smaller and align left.
1. Display only product images (remove entry-wrap with title & description).

Shop single:
3. Single product – Reduce product title font.
4. Products suggestions (upsell/cross-sell) “You may also enjoy…”. I would like to only show the product image – remove the entry-wrap.

Blog
5. Format Page title – reduce font and align left
6. Remove feature images from blog archive AND Blog single.
7. Reduce blog post title font
9 Remove post author

Cart
10. How do I enlarge the product images?

Does it make a different whether to combine all @media css together, or have it seperate?

Here’s what I tried to get some of the above done, without succes….

@media (min-width: 320px) and (max-width: 767px) {
.entry-featured .entry-thumb { display: none !important;}
.blog h2.entry-title {padding-top:20px;color:pink;font-size:15px}
.blog .entry-featured {display:none!important;}
.blog .archive .entry-featured {display:none!important;}
.blog .archive .p-meta > span:nth-child(1) { display: none!important; }
.h1.h-landmark blog .x-header-landmark,.page .x-header-landmark .archive .x-header-landmark { margin: 0; text-align: left; margin-top:1%; border-left: 0; margin-left:0;}

.products .product .entry-product .entry-wrap {
display:none!important;}

}

Thanks for your help!

[venya]

This reply has been marked as private.

[Jade]

Hi Ben,

You can add this under Custom > CSS in the Customizer.

@media (max-widt: 767px) {
    h1.h-landmark {
        margin-left: 0;
        font-size: 35px;
    }

    .woocommerce li.product .entry-wrap,
    .has-post-thumbnail .entry-featured,
    .p-meta>span:first-child {
        display: none;
    }

    .blog h2.entry-title {
        font-size: 28px;
    }

    .woocommerce .cart.shop_table .product-thumbnail img {
        width: 100%;
    }

}

Hope this helps.

[venya]

Hi, Unfortunately that didn’t appear to change anything. Don’t understand why…

For mobile:
1. The entry-wrap below products on mobile on product list pages is still there.

2. The h1 and h2 remain the same. I added a color: to make it obvious changes took effect.

3. In blog the feature images before the posts are still there. I want to hide them for mobile and desktop site..

4. cart: the product thumbnails are still tiny and barely visible.
Thanks for your assistance.

[Rue Nel]

Hello There,

The given css should have work. Upon checking, there were missing curly braces in your custom css code. Please correct it immediately.
http://prntscr.com/axsoly
http://prntscr.com/axspb6
http://prntscr.com/axspro
http://prntscr.com/axsq0m
http://prntscr.com/axsqbb
http://prntscr.com/axsqpx

Hope this helps. Kindly let us know.

[Author]

Posts