Multicolumn Title outside & above the box with subtitle bellow the box

[Lumify]

Dear All,

Those anyone know if it is possible to have the titles in the column section above the columns boxes and as well like a subtitle bellow the columns boxes?

See example bellow:

[Sangeetanahar]

Hello @Lumify 

Can you please send me the Website URL.

Thanks

[BSS-TekLabs]

- Here is the solution for you @Lumify 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.multicolumn-list h3.inline-richtext {
    color: green !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px !important;
    color: green !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Lumify]

Hi BSS-TekLabs

Thank you for your help, but can you make the main titles to be above the box not in the box and the subtitle bellow the box in bold as well? Thank you

[BSS-TekLabs]

.multicolumn-list h3.inline-richtext {
    color: green !important;
    position: absolute !important;
    top: -30px !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px !important;
    color: green !important;
font-weight: bold !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}

Can you try this code @Lumify 

[Lumify]

It starting to look great...thank you. 2 more questions please...

[BSS-TekLabs]

@media only screen and (min-width: 600px) {
.multicolumn-list h3.inline-richtext {
    color: green !important;
    position: absolute !important;
    top: -37px !important;
    left: 37% !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px !important;
    color: green !important;
font-weight: bold !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}
}

Can you try this code @Lumify 

[Lumify]

Thank you, but the subtitles are still as a link...Are you able to change that?

[BSS-TekLabs]

@media only screen and (min-width: 600px) {
.multicolumn-list h3.inline-richtext {
    color: green !important;
    position: absolute !important;
    top: -37px !important;
    left: 37% !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px !important;
    color: green !important;
font-weight: bold !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}
.multicolumn-card__info .icon-wrap {
    display: none !important;
}
}

using this code if you want like this @Lumify 

[BSS-TekLabs]

Im update the code can you try this @Lumify 

[Lumify]

Many thanks for the update. Just one last thing. The subtitle of the first coumn is very far from the box line can they all be at te same level?

[BSS-TekLabs]

@media only screen and (min-width: 600px) {
.multicolumn-list h3.inline-richtext {
    color: green !important;
    position: absolute !important;
    top: -37px !important;
    left: 37% !important;
}
.multicolumn-card__info .link {
    position: absolute !important;
    bottom: -89px
    color: green !important;
font-weight: bold !important;
}
.multicolumn-list li:first-child .multicolumn-card__info .link {
 bottom: -30px !important;
}
.section-template--17183480709298__multicolumn_dNLhMU-padding {
     margin-bottom: 50px !important;
}
.multicolumn-card__info .icon-wrap {
    display: none !important;
}
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @Lumify .

[Lumify]

Good evening,

I just tried your code and I am getting this...Please help me fix it. thank you

[ProtoMan44]

@Lumify Hey, thanks for posting here.
 can you please share the link to inspect it, thanks.