Docs

[bjmiller]

I have 5 columns in a row and would like to make them clickable to the applicable page.

[bjmiller]

This reply has been marked as private.

[Joao]

Hi There,

Add a different ID to each column.

#column-link , #column-link-1, #column-link-2, #column-link-3, #column-link-4

Add the following code to Cornerstone : Setting : Custom : JS

jQuery("#column-link").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

jQuery("#column-link-1").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

jQuery("#column-link-2").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

jQuery("#column-link-3").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

jQuery("#column-link-4").wrap("<a href='http://www.example.co.uk/get-in-touch/'></a>"); 

Change http://www.example.co.uk/get-in-touch for the desired link

Hope it helps

Joao

[bjmiller]

That had big affect on my spacing. How would I fix it?

[Paul R]

Hi,

You may change the code to this.

jQuery("#column-link").wrap("<a class='my-link' href='http://www.example.co.uk/get-in-touch/'></a>"); 
jQuery("#column-link-1").wrap("<a class='my-link' href='http://www.example.co.uk/get-in-touch/'></a>"); 
jQuery("#column-link-2").wrap("<a class='my-link' href='http://www.example.co.uk/get-in-touch/'></a>"); 
jQuery("#column-link-3").wrap("<a class='my-link' href='http://www.example.co.uk/get-in-touch/'></a>"); 
jQuery("#column-link-4").wrap("<a class='my-link' href='http://www.example.co.uk/get-in-touch/'></a>"); 

Then add this in Cornerstone > Settings > Custom CSS (https://www.screencast.com/t/UIPW7GRa)

.my-link {
    display:block;
    width: 16.8%;
    float:left;
    margin-right: 4%;
}

.my-link .x-column.x-1-5 {
    width: 100% !important;
}

#x-section-3 .x-container .my-link:last-child {
   margin-right:0;
}

Hope that helps.

[bjmiller]

Thanks! You are appreciated.

[Paul R]

You’re welcome! 🙂

[bjmiller]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the customizer:

@media (max-width: 767px) {
    .my-link {
        width: 100%;
    }

    .my-link .x-column {
        padding-bottom: 50px !important;
        margin-bottom: 20px;
    }

}

Hope this helps.

[Author]

Posts