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

This topic contains 11 replies, has 2 voices, and was last updated by  Nitro Support 3 months, 1 week ago.

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

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

    You must be logged in to view attached files.

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



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


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

    Thank you




    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>
    <a target="_blank" href="https://www.jolcis.com.ng/shop">See all <i class="fa fa-angle-right mgl10"></i></a>

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



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

    Thank you


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


    But it still affect the desktop view after inserting again



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

    Just reinserted it, It actually worked fine.



    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.