Center align grid with background image

Hi there,

so on the Grid you keep the Vertical Alignment to default for same-height.
then on the individual column container you can set is Vertical Alignment to center.

That worked like a charm, David, thank you!

One more question, please (and I can open a new thread if you prefer) - this site was started on the "Coach" site from the GP site library, which has a menu effect with a vertical line that hovers above each item. I've been testing the site on my iPad Pro and the line appears when my iPad is in landscape mode, but not in portrait mode. I think it's a matter of updating the following CSS (I have the mobile menu breakpoint set at the default 768... I tried changing the min-width in the CSS to 769, 800, etc. but can't seem to make the lines appear on a portrait tablet. I'd appreciate your guidance on this. Thank you!):

/* navigation line effects */

@media (min-width: 1000px) {
	.main-navigation .main-nav > ul > li > a:before {
    position: absolute;
    content: '';
    width: 1px;
    height: 0;
    background-color: var(--accent-2);
    left: 50%;
    top: -50px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
	}

This all of the CSS:

@media (min-width: 769px) {
    .main-navigation .main-nav>ul>li>a:before {
        position: absolute;
        content: '';
        width: 1px;
        height: 0;
        background-color: var(--accent-2);
        left: 50%;
        top: -50px;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: all .3s ease-out 0s;
        -moz-transition: all .3s ease-out 0s;
        -ms-transition: all .3s ease-out 0s;
        -o-transition: all .3s ease-out 0s;
        transition: all .3s ease-out 0s;
    }

    .main-navigation .main-nav>ul>li.current-menu-item>a:before {
        height: 50px;
        width: 1px;
    }
}

@media (min-width: 769px) and ( pointer: fine ) {
    .main-navigation .main-nav>ul>li:hover>a:before {
        height: 50px;
    }
}

Try this - I made some mods to it.
Note there are 2 x media queries that I set to 769px. The last on is the hover effect, which I also include a pointer: fine query to stop the Hover effect on touch devices.

You will see the Current Menu item effect just not the hover on touch devices as that can lead to double taps on the menu item

Hi David,

That worked beautifully! Thank you so much for all your help. Two problems solved!

Catherine

Glad to be of help!

how do I center a container with a grid of 5 items for full width?
which block, grid or container needs to be set for center? do i need a container for the grid ?
what is the best way to make a full width block with 5 items?
Container with a Grid of 5?
Container of Containers no Grid?
When should i use a grid or not?

I've set the container to horizontal alignment center, the containers inside are set to center, the headlines and image in each are set to center. still showing left justified.

Hi there,

can you raise a new topic and share a link to your page where we can see the issue. We can then advise.