Docs

[Leanna]

Hi, I’m gradually getting rid of the plugins that are bogging down my site. Today I’m working on switching to Block Grid instead of plugin grids. Test page in question where my trial block grid resides: https://www.tellasia.org/?page_id=3639

1) in mobile view in Chrome the four boxes stack up nicely with two boxes to a row, all aligned. But in Firefox and IE the upper right one (Educate) is positioned down a little ie out of alignment. How can i force them to stay aligned to their rows like in Chrome?

current Customizer code:
/*BLOCK GRID MOBILE keep single row prevent stacking */
@media (max-width: 480px){
.x-block-grid.four-up>li {
width: 40%;
height: auto;
overflow: hidden;
}
}

2) Change-On-hover to cause color on hover works in Chrome and Firefox but not in IE. How can i fix this? The custom class that is running this is;

/* Image bw to color on Hover add class “change-on-hover” */
.change-on-hover {
webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%); }
.change-on-hover:hover {
webkit-filter: none;
-webkit-filter: none;
-moz-filter: none;
filter: none; }

thanks

[Leanna]

This reply has been marked as private.

[Lely]

Hello Leanna,

1.) Please also add this custom CSS:

@media (max-width: 480px){
.x-block-grid.four-up>li:nth-child(2) {
    margin-top: 0;
}
}

2.) Did you figure this out already? The color is changing on hover same with Chrome. See this :http://screencast-o-matic.com/watch/cDi2QQiaKC. If not, please clarify the issue.

Hope this helps.

[Leanna]

1) Your code worked to align the columns! Great job.

2) Yes in MS Edge the colorchnge works, however lots of people are probably still running IE and it doesn’t work in IE. Not the end of the world but would bed nice to fix.

3)In Mobile view the items should go all the way or most of the way out to the edge of the screen but as it is they are squished up in the middle with big margin around them and no space between them. Also not centered in either mob or desktop view. Desktop view has 6% left and right padding set but mobile view should have 0 padding but very small space btw the items. Please help me correct this. Current Mobile View code is:

@media (max-width: 480px){
.x-block-grid.four-up>li {
margin: 0;
width: 90%;
height: auto;
overflow: hidden;
}
}

@media (max-width: 480px){
.x-block-grid.four-up>li:nth-child(2) {
margin-top: 0;
}
}

[Rad]

Hi there,

2. IE doesn’t have any support for a grayscale filter. Although, some hacks are available. Like from here

http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

3. If you wish it to be centered, then it should be like this,

@media (max-width: 480px){
.x-block-grid.four-up>li {
margin: 0 auto;
width: 90%;
height: auto;
overflow: hidden;
display: block;
clear: both;
}
}

but if you wish to remove the padding space, then should be like this

@media (max-width: 480px){
.x-block-grid.four-up>li {
width: 100%;
height: auto;
overflow: hidden;
}
}

You may add this this too

@media (max-width: 480px){
.x-block-grid.four-up>li:nth-child(3), .x-block-grid.four-up>li:nth-child(4) {
    margin-top: 0%;
}
}

Hope this helps.

[Leanna]

I put in the latter two code items above but it resulted in loss of the two-item rows I had before. I do not want only one item up in mob view because then the item is HUGE. I need to keep the two items in a row as it was before, only centered and a bit closer to the edge.

I put the code back the way it was previously but can’t get the nice two-items-per-row at all now in mobile view. Plz help. I’ve attached a screen shot of what it looked like before you gave me the code to level the top two items. I need this view back…only top two leveled and optimally spread out a little toward the edges of screen.

[Lely]

Hi There,

Thank you for the screenshot. To fixed that view on mobile, please also add this custom CSS:

@media (max-width: 480px){
.x-block-grid.four-up>li:nth-child(2) {
    margin-top: 0 !important;
}
}

Hope this helps.

[Leanna]

That’s fine but the problem is now we’ve lost the two-items-in-a-row mobile view and instead all four items are stacked on top of each other, resulting in each item being HUGE in in mobile. Please see SCREEN SHOT below. I don not want this. instead, I want it to look like the above image which i what it was before we started messing with centering. How can I get back to two items in a row in mobile view?

[Jade]

Hi there,

Please update the code to:

@media (max-width: 480px){
    .x-block-grid.four-up>li:nth-child(2) {
        margin-top: 0 !important;
    }

    .x-block-grid.four-up>li:first-child {
        margin-bottom: 5% !important;
    }
}

Hope this helps.

[Leanna]

so sorry – it didn’t work. This is very strange why the two-in-a-row on mobile worked beautifully before, then we tried to center and now all we can get is one-in-a-row. Weird.

[Rue Nel]

Hello There,

Please update the code and use this instead:

@media (max-width: 480px){
    .x-block-grid.four-up>li{
        width: 48%;
        margin-right: 2%;
    }

    .x-block-grid.four-up>li:nth-child(2) {
        margin-top: 0 !important;
        margin-right: 0 !important;
    }

    .x-block-grid.four-up>li:first-child {
        margin-bottom: 5% !important;
    }
}

Please let us know if this works out for you.

[Leanna]

BRAVO!!!! YOU DID IT!!! Thanks Rue you’re a code genius!
One final issue is that in regular desktop view it’s still not centered. Seems odd that everything else in X is easily centered but Block Grid is such a bugger to center… I don’t want to just use left padding as it won’t be perfectly centered.

[Thai]

Hi There,

Please add the following CSS on the top of the provided CSS codes:

.x-block-grid.four-up>li {
    width: 24.25%;
}

Hope it helps 🙂

[Leanna]

AMAZING! YOU DID IT! Ok now i can use Block Grid across the whole site and ditch two plugins! I truly appreciate all your help.

[Rad]

You’re so much welcome Leanna!

[Author]

Posts