Okay
  Public Ticket #1405937
I need to make a five column row
Closed

Comments

  •  2
    Evan started the conversation
    December 18, 2017 at 7:24am

    Hi,

    I have read a bunch of articles online and I need assistance in making a five column row. 

    Could you assist me in implementing a five column row on my page?

    Thank you. 

    Evan

  •  9,017
    Tahir replied
    December 18, 2017 at 12:33pm

    Hey ,

    You need to set a custom class for that 5 column row and then divide the column into 6 columns . See screenshot: http://prntscr.com/8bh836 .

    After then hide the 6th column and increase the 5 column width using the below CSS .

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media (min-width: 768px) {
    body .five-column.vc_row-fluid .vc_col-sm-2 {
        width: 17.893617%;
    }
}
body .five-column.vc_row-fluid .vc_col-sm-2:last-child {
    display: none !important;
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Evan replied
    December 18, 2017 at 10:10pm

    Thanks for posting this, Tahir.

    However, it actually still isn't working. As you can see on the page at new.frescafoodsinc.com, it is still displaying 5 columns, even though there is nothing in the 6th column. I have added the custom CSS and am still experiencing the same issue.

    Any thoughts on what is causing this? I have cleared caches and everything without any luck.

    Thanks


  •  9,017
    Tahir replied
    December 19, 2017 at 6:23pm

    Hey Again,

    The css works fine in the Live Browser: http://prntscr.com/hpp7ol . 

    Please make sure there is no red cross in the custom css box. 

    Be.st

    ThemeNectar Support Team 

  •  2
    Evan replied
    December 19, 2017 at 6:41pm

    What?

    That doesn't look correct on your browser either. There is clearly a gap or space to the right of the set of columns.

    That's the other thing, is that there are also red crosses in the .css you provided me. See attachment. 

    Please help, this website is supposed to be launched live today. I cannot wait until tomorrow for you to report back to me.

  •  2
    Evan replied
    December 19, 2017 at 6:49pm

    Does this appear to be responding correctly to you? Because it definitely does not to me... 

  •  2
    Evan replied
    December 19, 2017 at 6:50pm

    Here is the screen shot on mobile, clearly not correct

  •  9,017
    Tahir replied
    December 19, 2017 at 6:53pm

    There needs to be a ending curly brace here : http://prntscr.com/hppnfv . 

     Try adjusting the percentage in the css and it will work perfectly .

    Best

    ThemeNectar Support Team 

  •  2
    Evan replied
    December 19, 2017 at 7:02pm

    How could I have missed that, I'm an idiot!

    Thank you for your help, Tahir :)

  •  2
    Evan replied
    December 19, 2017 at 7:09pm

    Last question:

    In the five column rows, do you know what I need to change in order to make them stack all in one single row, instead in two columns when on mobile?

    In the attached screen shot, there are two columns - one with three text blocks and one with two text blocks. 

    I would prefer them to all stack in a single column on top of each other - one column with all five text blocks on top of each other.

    Thank you

  •  9,017
    Tahir replied
    December 19, 2017 at 7:35pm

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (max-width: 690px) {
    body .five-column.vc_row-fluid .vc_col-sm-2 {
        width: 100% !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Evan replied
    December 19, 2017 at 7:48pm

    You are awesome - thank you so much!