2 Column Using Shortcode In Mobile

[wanderial]

Hello. I’m trying to do column inside column using this kind of shortcode

[column type=“1/2”] Place your content in here. [/column] [column type=“1/2” last=“true”] Place your content in here. [/column]

how to keep those two columns fixed in mobile? The content is minimal so it should be possible to shown side by side in mobile. Thank you.

[Joao]

Hi There,

Please provide your URL and point the specific columns so we can provide you a CSS solution instead.

Thank you

[wanderial]

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.

[paul.r]

Hi,

You can use blockgid instead of columns.

http://demo.theme.co/integrity-1/shortcodes/block-grid/

To add border, you can add the code below in X > Launch > Options > CSS

.x-navbar {
   border-bottom:1px solid rgba(72, 72, 72, 0.5);
}

.x-colophon.top {
    border-top:1px solid rgba(72, 72, 72, 0.5);
}

Hope that helps

[wanderial]

Can I resize the grid? Like 2/3 + 1/3.

[wanderial]

For the question two, it solve the problem and thank you. But I can’t really achieve what I really want to do in the first question without the column. So any possible way for column to be shown side by side in mobile? Default visual composer can do that with an easy method but I can’t found it here in Theme X Visual Composer.

[wanderial]

Blok Grid is also doesn’t works. It breaks in mobile. Please Respond asap, it’s been more than 3 days and I don’t get my solution. My dev time are dragged too long now it’s getting frustating because it only takes a simple button with default visual composer.

[christopher]

Hi there,

Sorry for our late reply, we are experiencing quite a traffic these days due to the new release of the theme, but it should get back to normal in a week or 2.

I would recommend that you wait until one of our colleagues answer the reply from your side if you add additional replied to your old ones without having an answer from our side the thread will go to the end of the queue and waiting time will double.

Now regarding the case you are talking about, our column system does not have the functionality you have mentioned and it is not like the Visual Composer. You will need to add a specific CSS code to achieve that. For example, as you used the 1-5 and 2-5 columns on the page the code to override the default behavior will be:

.page-id-4 .x-column.x-sm.x-2-5 {
	width: 37.6%;
	float: left;
}

.page-id-4 .x-column.x-sm.x-1-5 {
	width: 16.8%;
	float: left;
}

You can add the code to X > Launch > Options > CSS. I added the page id as the wrapper of the CSS code to bound the code only for the page you have given us. But if you want to have it on other pages it is better that you add a class name to the sections that you want this behavior on and change the CSS code accordingly.

Hope it helps.