[Resolved] PHP Snippet Footer Width, Copyright Width – Floats to Flexbox

[Rylan Urban]

Hi Leo – we’re almost there. Here’s what I’m trying to do.

– Disable the copyright area
– Vertical center the social icon and menu widgets within the space
– Left align the social icon, leave the menu center

[Elvin]

Hi,

Try this:

For social icons and the menu:

Try this –

/* Hides the copyright bar from display */
.copyright-bar {
    display: none;
} 

/* Remove Footer Bar socmed margin-bottom */
.footer-bar .lsi-social-icons li { margin: 0 8px 0px 0 !important; }

/* Styling on desktop and tablets */
@media (min-width:769px){
.inside-site-info .footer-bar {
    display: flex;
    position: relative;
    width: 100%;
    margin: 0px;
}

.footer-bar aside#nav_menu-2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
}
}

/* Styling on mobile */
@media (max-width:768px){
.footer-bar{ display:flex; flex-wrap:wrap; justify-content: center; }
.footer-bar aside#lsi_widget-2 {
    width: 100%;
    display: block;
}
    
.footer-bar aside#nav_menu-2 {
    width: 100%;
    display: block;
}
    
.footer-bar ul.lsi-social-icons.icon-set-lsi_widget-2 {
    width: fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
}

}

[Rylan Urban]

Super close! Just not sure how to adjust the left margin. It’s going right to the edge of the page.

[Elvin]

Super close! Just not sure how to adjust the left margin. It’s going right to the edge of the page.

You can add this within the @media (min-width:769px){ ... }:

.footer-bar aside#lsi_widget-2 {
    margin-left: 20px;
}

[Rylan Urban]

Thanks, now live on the main site!

[Rylan Urban]

Sorry.. Hopefully this is the last thing. The links don’t work properly when you hover the social icons. You have the put the mouse on the corner of the icon or in the exact center… Note, site is here.

[Elvin]

Modify this:

.footer-bar aside#lsi_widget-2 {
    margin-left: 20px;
}

Into this:

.footer-bar aside#lsi_widget-2 {
    margin-left: 20px;
    z-index: 100;   
}

Let us know how it goes.

[Rylan Urban]

Case closed! And by the way, I changed 20px to 3%. Thanks!

[Elvin]

Case closed! And by the way, I changed 20px to 3%. Thanks!

Nice one. No problem. 🙂

[Author]

Posts