Docs

[logoglo]

Hi there:

https://llf-consulting.com/pricing-plans/

I have those 3 columns in a content band, within a 1 column center band, I have the class and css for the 3 clumns set to:

}
.one-third-no-spacing {
margin-right: 0;
width: 33.3333%;
}

@media (max-width: 767px) {
.one-third-no-spacing {
width: auto;
}
}

To remove the spaces.

This makes them all align to the left of the screen as you can see. How do I center this?

Also, how do I make the 3 columns stack on an ipad portrait? at the moment they shrink and stay as 3, would be great if they stacked on everything other than desktop, and ipad landscape.

Thanks.

[Friech]

Hi There,

Thank you for writing in! The columns looks center to me, please clarify.

Desktop
Mobile

We’ll be happy to provide you with a response once we have a better understanding of the situation.

Try clearing your browser’s cache too.

Cheers!

[logoglo]

The 3 price columns are not centered to the page, see the sentence above it, “choose” and “menu” and how the columns underneath line up.

Also, how do I make the 3 columns stack on an ipad portrait? at the moment they shrink and stay as 3, would be great if they stacked on everything other than desktop, and ipad landscape.

[logoglo]

see attached.

[Christopher]

Hi there,

Please find this code :

.one-third-no-spacing {
  margin-right: 0;
  width: 33.3333%;
}

and update it to :

@media (min-width:767px){
.one-third-no-spacing {
    margin-right: 0;
    width: 33.3333% !important;
}
}

Hope it helps.

[logoglo]

That didnt work, it made the images shrink on a mobile. Im more concerned about the alignment of the 3 image on the page, its still not centered…its aligning right…See the screenshot I attached.

I want the 3 columns to be centered.

On a tablet landscape it looks ok, but portrait, they shrink, I want them to stack as on a mobile device.

Please address both of the above issues.

Thanks.

[Friech]

Hi There,

Please update your css code:

.one-third-no-spacing {
  margin-right: 0;
  width: 33.3333%;
}

To this:

.one-third-no-spacing {
	margin-right: 0;
	width: 33.3333% !important;
}

This is to make sure that the 3 columns divided the rows equally, this should center the images.

Then add this custom CSS to stack the images on mobile (including tablet portrait view).

@media (max-width: 768px) {
	.one-third-no-spacing,
	.one-third-no-spacing .x-img {
		    width: 100% !important;
	}
}

Hope it helps, Cheers!

[logoglo]

That worked perfectly, thanks!

[Jade]

You’re most welcome.

[Author]

Posts