Home Forums Technical Support Split: Visual composer – Products mobile layout

This topic contains 11 replies, has 2 voices, and was last updated by  Louis Alviss 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #19040

    That worked thank you so much, but then can i get a seperator like the the below sample

    Attachments:
    You must be logged in to view attached files.
    #19042

    And the header for the raw Html can I get that to be more mobile friendly? just above the products

    #19047

    Hi,

    1. To achieve that same border products design, you can edit the Products shortcode > Select this option:

    http://prntscr.com/od3jnl

    2. What exactly do you want to make it mobile friendly? Please clarify your design idea so we can help achieve it.

    Thank you

    #19048

    Sure,

    #19049

    I added this raw HTML to a single row, before adding products directly under it and i want it to fit on a mobile device,

     

    <div class="fc jcsb">
    <h3 class="custom-text-1" style="font-size: 14px;margin: 0;line-height: 24px;font-weight: 500;position: relative;">DEALS ON FASHION / ACCESSORIES</h3>
    <ul class="custom-text-2 fc jcc" style="list-style: none;">
    <li><a target="_blank" href="https://www.jolcis.com.ng/shop">Women’s Clothing</a></li>
    <li><a target="_blank" href="https://www.jolcis.com.ng/shop">Men’s Clothing</a></li>
    <li><a target="_blank" href="https://www.jolcis.com.ng/shop">Sportswear</a></li>
    <li><a target="_blank" href="https://www.jolcis.com.ng/shop">Clocks</a></li>
    <li><a target="_blank" href="https://www.jolcis.com.ng">Eyewear</a></li>
    <li><a target="_blank" href="https://www.jolcis.com.ng/shop">Belts</a></li>
    </ul>
    <a target="_blank" href="https://www.jolcis.com.ng/shop">See all <i class="fa fa-angle-right mgl10"></i></a>
    </div>
    #19050

    This Code i inserted made the desktop view really funny do you have any suggestions?

    @media handheld, only screen and (max-width: 960px) { .cxs-12.cs-6.cm-2.product.type-product { width: 50% !important; } }

    #19051

    Hi,

    That code can’t effect on the Desktop view because it works for the width under 960px only, please kindly recheck

    Thank you

    #19052

    I removed it, after inserting it and it returned to normal

    #19053

    But it still affect the desktop view after inserting again

    #19054

    Hi,

    A screenshot of what happened after you insert that code would be great, because it can’t affect the desktop screen size:

    @media handheld, only screen and (max-width: 960px) { 
    .cxs-12.cs-6.cm-2.product.type-product { width: 50% !important; } 
    }
    #19055

    Just reinserted it, It actually worked fine.

    #19060

    Hello,

    Thanks for your update, if you need any assistance, please let me know

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

You must be logged in to reply to this topic.