Okay
  Public Ticket #425012
Visual Composer -- tablet portrait columns
Closed

Comments

  • Peter started the conversation
    April 29, 2015 at 7:13pm

    Hello!

    There are loads of great controls in your theme admin.

    I've been able to make a row with six columns which collapses to three columns in mobile view using the Visual Composer's "Width & Responsiveness" settings.

    But strangely there are no options to control the width in tablet portrait view ... the selector is replaced with "Default value from width attribute" when I need to select "4 columns - 1/3"

    So I end up with a single column row in the portrait tablet view when I want three columns like my mobile view.

    Is there a way around this? It so nearly works!

    Regards,

    Peter

  •  8,996
    Tahir replied
    April 30, 2015 at 2:06pm

    Hey,

    You will have to set a custom class on that row and write up a media query to keep the column width in the percentages you want.

    Thanks

    ThemeNectar Support Team 

  • palmequipment replied
    May 1, 2015 at 12:34pm

    Thanks for the pointer Tahir, will do ...

  • Nik replied
    December 8, 2016 at 8:38am

    Rather than writing out all styles for the columns again, is there a way of overriding for the tablet portrait breakpoint so that it uses mobile or one for the others? 

  •  8,996
    Tahir replied
    December 8, 2016 at 4:00pm

    Hey Again,

     One way to do it would be via Custom JS . The Js would check for the mobile css classes and apply the same to tablets . 

    Could you setup a test page so i can try some code out. 

    Thanks 

    ThemeNectar Support Team 

  • Nik replied
    December 9, 2016 at 4:49am

    No that's okay, but thank you.

    I ended up rewriting the breakpoints:

    /* Home Portrait Tablet Fix */
    @media only screen and (max-width: 1000px) and (min-width: 769px) {
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-12[class*="vc_col-sm-"] {width: 100% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-11[class*="vc_col-sm-"] {width: 92% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-10[class*="vc_col-sm-"] {width: 83% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-9[class*="vc_col-sm-"] {width: 75% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-8[class*="vc_col-sm-"] {width: 67% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-7[class*="vc_col-sm-"] {width: 58% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-6[class*="vc_col-sm-"] {width: 50% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-5[class*="vc_col-sm-"] {width: 42% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-4[class*="vc_col-sm-"] {width: 33% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-3[class*="vc_col-sm-"] {width: 25% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-2[class*="vc_col-sm-"] {width: 12% !important;}
    body .home-tablet-portrait-fix .vc_row-fluid .vc_col-sm-1[class*="vc_col-sm-"] {width: 8% !important;}
    }