Docs

[bluestack]

Hi,

I’m really struggling to get my head around column layouts between devices and getting them to work responsively.

My site: spitfireuav.com has a section with 5 columns but they only responsively move to 1 column on a Phone. On a tablet they always overlap, I have tried a variety of different settings: marginless/no padding/padding/box-grid and I get the same result of overlap on a tablet in either portrait or landscape. I’ve also tried some custom CSS but nothing seems to work.

I’ve looked on the forum and there is nothing overly helpful, I tried using CSS from one thread I found but it did nothing.

Ideally I’d like the Columns to have a fixed width but I can’t figure out how to do that either.

This is something I have a problem with on multiple sites so a fix would be greatly appreciated!

Thanks in advance!

[Nabeel A]

Hi there,

Thanks for writing in! Use Cornerstone’s Responsive Text settings to make the titles responsive on that page. Go to Cornerstone’s Settings > Responsive Text, add a new item and in Selector field enter .h-custom-headline

Let us know how this goes!

[bluestack]

Hi,

I have done that and the title text no longer overlaps, that was a solution I had thought of but it still leaves the columns squeezed together in portrait mode on a tablet…

Is there any way to add some media queries to get the columns to have a fixed width so they can go from 5 to 3-2 on a tablet?

I’ve also thought about creating a new section only visible on tablets and mobile but in the past I haven’t had great results across mobile devices, mainly due to different resolutions on the devices.

Thanks!

[Joao]

Hi There,

Is there any way to add some media queries to get the columns to have a fixed width so they can go from 5 to 3-2 on a tablet?

Thanks for writing in! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

I’ve also thought about creating a new section only visible on tablets and mobile but in the past I haven’t had great results across mobile devices, mainly due to different resolutions on the devices.

Hi There,

You should always check your work while doing this, tablets and mobiles now a day have very similar standard resolution.

Please point the section you are trying to achieve that so we can give you some advice.

Thanks,

Joao

[Author]

Posts