[anthonyallenParticipant]

Hi,
I’ve noticed that, when using X with 4 columns, the responsive break goes from 4 to 1 with no in between. I’m seeing:
Desktop – 4 columns
iPad – 4 columns (both landscape and portrait)
iPhone – 1 column

A 4-2-1 break would be more ideal for me and here’s why…
I created a 4 column layout. Each column is centered with image, title, paragraph text. The problem is that, when viewed on iPad in Portrait mode, the text becomes like a pillar, tiny width and really tall. This is terrible.

The solution would be, on tablets in PORTRAIT mode, to have a single row 4 column layout convert to a 2 row 2 column layout. Is this something available that I am missing or can you assist with this.

Thanks,

Tony

Please view the home page just below the image slider. Section heading “Our invitation to Happily Ever After”. Viewed on iPad mini 2 in portrait mode, the 4 columns look quite bad, even with minimal text.
Miidear Wedding Invitations Website

[RupokMember]

Hi Tony,

Thanks for writing in! You can use media query to control the column size for specific screen range :

@media only screen and (min-width: 768px) and (max-width: 979px) {
.x-column.x-1-4 {
  margin-right: 2%;
  width: 48%;
}
}

You can change the min-width and max-width to change the screen size range if needed.

Hope this helps.

Cheers!

[anthonyallenParticipant]

Perfect, thanks.

[ChristianModerator]

You’re welcome. 🙂

[Author]

Posts