Docs

[Rupok]

Hi there,

Thanks for updating. Kindly try updating the code :

@media (min-width: 768px) {
    .home #x-content-band-9 .x-column.x-1-6 {
        width: 16.33332%;
    }
}

Hope this helps.

Cheers!

[TushitaKBC]

That’s it! It was just a matter of using min-width to get the right appearance on my pc.

Thanks so much Rupok.

[Joao]

Great to hear it

Let us know if we can help you with anything else.

Joao

[TushitaKBC]

Hi guys

So, we found a solution to center my homepage posts when there are only 5 posts, which is awesome. The solution was band specific.

@media (max-width: 767px) {
    .home #x-content-band-9 .x-column.x-1-6 {
        width: 16.33332%;
    }
}

When I add a new band anywhere before this, the css no longer applies and I have to find the new band number.

I am wondering, is there a way to write the css so that it applies to all content bands that contain the 6 column config only? Then, I won’t have to update the css anytime I add or remove bands.

Thanks so much

[Rue Nel]

Hello There,

To make the code that will work out globally, you can use this code instead:

@media (max-width: 767px) {
    .home .x-content-band .x-column.x-1-6 {
        width: 16.33332%;
    }
}

We would loved to know if this has work for you. Thank you.

[TushitaKBC]

Hey guys, well done. It does indead work, but only if you use the code as follows:

@media (min-width: 767px) {
    .home .x-content-band .x-column.x-1-6 {
        width: 16.33332%;
    }
}

The width needs to be min, not max.

Thanks for that.
Cheers

[Christopher]

Let us know if you have further questions.

[TushitaKBC]

Hey Chris,

One last request. I noticed that the change we made also applies to the footer, but only on our homepage (www.meditateinolympia.org). As a result our footer is now 2 rows whereas it previously fit on one row. Can we not apply the css change from above to the footer?

I couldn’t quite figure it out. I tried messing with footer, x-column x-md x-1-1 last, textwidget,

But, I do want to avoid using “x-content-band-18” because the band number is a dynamic variable.

Thanks for your help again.

[Christopher]

Hi there,

Please update this code :

.home .x-content-band .x-column.x-1-6 {
        width: 16.33332%;
}

To:

.home #x-content-band-13 .x-column.x-1-6,home #x-content-band-9 .x-column.x-1-6 {
    width: 16.33332%;
}

Hope it helps.

[TushitaKBC]

Hi Chris

That would work. I am trying to make it so that we don’t use the bands because our homepage changes. That is why we have a global code. I am trying to set it so that for the footer it removes the coding/ sets it to the 1/6 config.

Thanks

[Rad]

Hi there,

You can also try a class base CSS and re-use it anywhere. Example,

.force-1-6-column .x-column.x-1-6, ..x-column.x-1-6.force-1-6-column {
    width: 16.33332%;
}

Then you can just add force-1-6-column to your content band’s Class. Or direct to the column’s class.

Thanks!

[TushitaKBC]

Thanks Rad

That worked perfectly.

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts