Column Responsive Problem & Header/Footer Border

[wanderial]

Hello. Sorry for reposting the thread but I need the solution ASAP (the previous one doesn’t get replied for days). I’ve tried to look for the solution in the forum but doesn’t seem working for me. Here’s my url : http://staging.wanderial.com/new-product-template/

##First Question

I want those two column (“el142 x-column x-sm x-2-5” & "el146 x-column x-sm x-1-5) not to be break / shown side by side when accessed from mobile.

Second Question

I’m using code below (column inside column) to achieve it in deskstop, but it always break when opened in mobile. Is it possible to make them shown side by side in mobile?

<p>[column type="3/4"]Promo Honeymoon Free<br>Upgrade Jacuzzi Suite 2 Malam[/column] [column type="1/4" last="true"][icon style="color: #e93f33; font-size: 40px;" type="clock-o"]</p><p>[/column]</p>

Third Question

Btw, how to add a border for header (bottom border) and footer (top border) in renew stack? I want it to be coloured #484848 with 1px wide, and maybe 0.5 oppacity.

[ruenel]

Hello There,

Thanks for writing in! Sorry your thread has not been replied for a day or two. We are swamped with tickets recently and this is why it would take us a little longer to respond.

1.) To resolve this, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
  .el142 .el147.x-column,
  .el161 .el166.x-column {
    width: 33%;
    float: left;
  }

  .el142 .el143.x-column,
  .el161 .el162.x-column {
    width: 66%;
    float: left;
  }

  .el149.x-column,
  .el168.x-column {
    display: none;
  }
}

2.) You are using the column shortcodes incorrectly. Please remove it and using a text element, please insert this code:

<span class="mrm" style="float: left">Promo Honeymoon Free<br>Upgrade Jacuzzi Suite 2 Malam</span> <span class="" style="float: right;">[icon style="color: #e93f33; font-size: 40px;" type="clock-o"]</span>

3.) To have a border, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar {
  border-bottom: solid 1px #484848 !important;
}

.x-colophon.top {
  border-top: solid 1px #484848 !important;
}

We would loved to know if this has work for you. Thank you.