5 columns on desktop and tablet - not great on mobile

Support
#1

Hi there

I have an issue, which I don’t know if you can help me with. I run a website that includes the cast of a musical. I have created 5 colums in the desktop design, and it looks nice on desktop and tablet, however on mobile there is only one column, it’s not centered, and the text space beneath the photos is wider than it should be.

My own solution is to create a different site for mobile, so that I can control everything myself, but it’ll take me a lot of time to add the many cast members once more.

Can you think of better way to make the responsiveness work better?

Kind regards
Astrid

#2

Hi Astrid,

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media (max-width:480px){
  .page-id-517 .x-section .x-column {
    text-align: center;
  }
}

Hope that helps.

#3

Thank you - it did help, now it’s centered. I would still like, though, to have the text boxes have the same width as the images. And since the images don’t have a fixed width, I’m wondering how to make that happen - can you help on that issue as well?

/Astrid

#4

Hi Astrid,

In that case, try updating your code as follows and see if that helps.

@media (max-width:480px){
  .page-id-517 .x-section .x-column {
    text-align: center;
  }
  .page-id-517 .x-section .x-column .x-text {
    width: 60%;
    margin: 0 auto !important;
  }
  .page-id-517 .x-section .x-column .x-image {
    width: 60%;
  }
}

Hope that helps.

#5

Hi again

It does do a bit of it, but it also makes the headlines behave differently, and it removes the spaces between picture and text. Thanks for the attempt, I think I’ll stick to the first solution for now.

Thank you! :slight_smile:

/Astrid

#6

You’re welcome, Astrid.

Cheers!

#7

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