Footer Widget Responsive Breakpoints

[JodyGreene]

Hi there! I’m working on the following website, and am having some trouble with the breakpoints for the widgets in the footer: http://shepherdstage.wpengine.com/

The footer widgets were breaking from two columns to one at too large a size, so I added the following code (per another forum) to change the responsiveness:

@media (min-width:481px) and (max-width: 979px) {
    .x-column.x-md {
        float: left;
        width: 48%;
        margin-right: 4%;
    }
    
    .x-column.x-md:nth-child(2n),
    .x-column.x-md.last, 
    .x-column.x-md:last-of-type {
        margin-right: 0;
    }
}

This worked, however now the second widget isn’t top aligned. Any help is appreciated in getting them aligned vertically!

Thanks!

[tristup]

Hi @JodyGreene,

Thanks for reaching out.

It seems the issue you are having due to the margin. As you have overridden the predefined breakpoints, you need to adjust the padding and margin depending on your custom CSS code.

Assumed the situation and screenshot to show an example that may need to adjust through your custom code.
Please remember that we don’t offer any support to custom codes. or any issue related to it.

Thanks