Docs

[xthemer]

Hey there,

I’m trying to resolve a number of issues with the display of block grid items on one of my pages. One is that the content overlaps on mobile devices. How can I prevent that from happening? Thanks!

My site is not yet online. URL and credentials will follow.

[xthemer]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

Usually, the sentence or texts break into multiple lines when displayed on a smaller screen. Overlapping occurs because the button has long word that can’t break into next line.

How would you like to appear? Stack together, if yes, then please add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media (max-width: 767px){
.x-block-grid.three-up>li, .x-block-grid.three-up>li .x-btn {
width: 100%;
display: block;
}
}

Hope this helps.

[xthemer]

Thanks Rad,

That solved the overlap problem. There are two further related things that I’m trying to resolve.

First:
Between min width of 768px and max of 979px, how can I get the two top-row x buttons to align more center and the last grid item (bottom row) to center. For better understanding, I’ve attached a visual.

Second:
After clicking on any one of the x buttons, the button stays the hover background color on mobile devices/touch screens. How do I get the button to return to its original color after the click event?

Thanks for your help!

[Thai]

Hey There,

Please add the following CSS:

@media (min-width: 768px) and (max-width: 979px){
    .page-id-97 ul.x-block-grid.three-up li.x-block-grid-item:nth-child(3) {
        width: 100%;
        margin-right: 0
    }
}

http://i.imgur.com/T1mzotH.png

Hope it helps 🙂

[xthemer]

Hi Thai,

That got the bottom button centered. Thanks.

But I’m also trying to get the top buttons/block grid contents meet in the middle/get centered as per the visual I sent.

And there was a further related issue I’m having: After clicking on any one of the x buttons, the button stays the hover background color on mobile devices/touch screens, at least on Android. How do I get the button to return to its original color after the click event?

Best

[Rad]

Hi there,

Please change this CSS,

@media (min-width: 768px) and (max-width: 979px){
    .page-id-97 ul.x-block-grid.three-up li.x-block-grid-item:nth-child(3) {
        width: 100%;
        margin-right: 0
    }
}

to this

  @media (min-width: 768px) and (max-width: 979px){
    .page-id-97 ul.x-block-grid.three-up li.x-block-grid-item:nth-child(3) {
        width: 100%;
        margin-right: 0
    }

.page-id-97 ul.x-block-grid.three-up li.x-block-grid-item:nth-child(1) a {
float: right;
}
.page-id-97 ul.x-block-grid.three-up li.x-block-grid-item:nth-child(2) a {
float:left;
}

}

About the buttons that stay on hover, it’s not currently possible since there is no hover on touch devices. It only applies to devices that have to pointing instrument like the mouse. There is no way to trigger hover out on mobile devices, or, you can simply disable the hover style on mobile.

@media ( max-width: 979px ) {

a.service-btn:hover, a.service-btn {
background-color: transparent;
    border: 2px solid #fff;
    min-width: 168px;
    color: #fff;
}

}

Hope this helps.

[xthemer]

Perfect Rad,

The css worked in both cases. Thanks!

[Rad]

You’re so much welcome!

[Author]

Posts