Docs

[onefoursix]

re: http://146test2.co.uk/cj/

1. We would like to apply a hyperlink in each of the grey boxes with the services on (just below top banner). How do we do this please? Is there a way to apply a link to a column rather than text?

2. I would like to increase the size of the Major Market Indices please by 20%

3. I would like to reduce the gaps between the text and the ” under the “what our clients say…” bit

4. I would like the “subscribe” button smaller by 50% on the subscribe to our newsletter bit in the footer.

re: http://146test2.co.uk/cj/our-products/

5. Same as question 1 please but for this page

http://146test2.co.uk/cj/our-products/inheritance-tax-planning/ (and all other services pages)

6. All of the grey boxes I would like evening up at the bottom (they are currently different sizes)

Thank you in advance!! 🙂

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed post.

1] To resolve this issue, please check out this topic: https://community.theme.co/forums/topic/making-entire-column-a-link-alters-layout-of-columns/#post-1255988

2] This is not possible because the iframe contents is coming from a 3rd party website. You can only change the font size if you have access to that site.

3] I can see that you already added a gap element. You can increase the height of the gap element if you want to have more space under the custom headline. As an alternative, you can also insert an inline css in the custom headline like “margin-bottom: 40px;” or maybe you can add a utility spacing classess mbl or margin bottom large. To know more about spacing classes, please check out this article: https://community.theme.co/kb/element-spacing/

4] To reduce the “subscribe” button smaller by 50%, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-subscribe-form input[type="submit"] {
    padding: 5px;
    width: 50%;
    margin: 0 auto;
    display: block;
    font-size: 80%;
}

5] Please follow the instructions in the topic and only add the JS and CSS in the Cornerstone’s Custom CSS/JS settings.

6] Do you want to have the columns with the same height? If that is the case, please check out this thread: https://community.theme.co/forums/topic/extra-space-at-bottom-of-page-post/#post-1246433

Hope this helps. Please let us know how it goes.

[onefoursix]

Thnak you for this

See – http://146test2.co.uk/cj/our-services/inheritance-tax-planning/

I managed to get the boxes to line up however as you will see the button now looks weird. Any ideas on how to include that in the box and have the boxes levelled off?

[Joao]

Hi There,

You have set :

height: 469px;

Please use instead:

min-height: 600px;

Hope it helps

Joao

[onefoursix]

I havent set a height. This is the code i used:

jQuery(document).ready(function($) {
var max = 0;
$(“#x-section-2 .x-column”).each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(“#x-section-2 .x-column”).css(‘height’, max);
});

[Joao]

Hi There,

I guess you could remove the script and set the min-height to the style box of each column.

Let us know how it goes,

Joao

[onefoursix]

But we want the height to be consistent across each column

[Friech]

Hi There,

It looks like you pasted that code twice? Please address it.

Thanks.

[onefoursix]

Thank you. I could now do with a gap under the button on http://candjfsl.co.uk/our-services/inheritance-tax-planning/ (under the estate planning column). It is too close to the bottom of the box.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.page-id-17 #x-section-2 {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 20px 0 !important;
}
.page-id-17 #x-section-2 .x-column.x-1-2 {
    width: 48% !important;
    display: table-cell !important;
    float: none !important;
    height: auto !important
}

@media screen and (max-width: 767px) {
.page-id-17 #x-section-2, .page-id-17 #x-section-2 .x-column.x-1-2 {
    display: block !important;
    width: 100% !important;
    padding: 20px !important;
    margin-bottom: 20px !important
}
}

Let us know how this goes!

[Author]

Posts