Table columns get stacked in mobile view

Support
#1

Hi,

I have a table that I do not want to stack in mobile view. I would like this to stay as 3 columns in mobile and tablet portrait view. How do I make this happen?
The link is in the secure note.

Please refer the following,

#2

Hi @rajitha1114,

Thanks for reaching out.

I tried it and it looks awful since it tends to increase height when the content is compressed. Hence, the alignment is still off. How about using the original HTML table? https://www.w3schools.com/html/html_tables.asp

This will align your content regardless of height, but of course, there will be spaces in the contents.

Thanks!

#3

Hi,

Thanks for your response.
I read about it & it will not be responsive right?
Is this the best option I could have?

#4

Can’t you provide me something like this?

#5

Hi,

To achieve that, you can add a unique class to your row.

eg. Add inline-row in the class field

Then add this in Theme Options > CSS

@media (max-width: 767px) {
	.inline-row .x-column.x-1-3 {
		width: 30.66666%;
		float: left;
		margin-right: 4%;
	}
	.inline-row .x-column.x-1-4:last-of-type {
		margin-right: 0;
	}
}

Hope this helps

#6

Hi,

Thank you for your response.
It is a bit better, but still not perfect.

#7

Hi There,

Please update the previous CSS to this:

@media (max-width: 767px) {
	.inline-row .x-column.x-1-3 {
		width: 30.66666%;
		float: left;
		margin-right: 4%;
	}
	.inline-row .x-column.x-1-3:last-of-type {
		margin-right: 0;
	}
}

Hope that helps and thank you for understanding.

#9

I could see that the columns are staying as 3 columns on mobile and tablet versions now.

Cheers!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.