Need help with footer layout

Highlighted
New Member
2 0 0

Hi guys,

I have a problem with my footer layout. I use the Venture template - https://lustyworldstore.com/

 

On the computer footer layout is as it should be:
image.pngPC - RIGHT LAYOUT

Now I want the same layout on Mobile but it displays like this (meaning the FOLLOW US container is not on the same level as INFO -> it is below)

image.pngMOBILE - WRONG LAYOUT

What exactly should I edit in footer.liquid in order to move the FOLLOW US next to INFO?

Thank you in advance!:)

0 Likes
 

You can add this code into your theme's stylesheet

@media only screen and (max-width: 749px){
.flex-footer .flex__item .text-right {
    text-align: inherit !important;
}
}

 

1 Like
New Member
2 0 0

Thank you for your reply,
However, it changes the position of FOLLOW US under INFO, not next to it (the same level as described on the picture)

image.pngMOBILE - NEXT TO INFO
Is it even possible to do so? 

0 Likes
Shopify Partner
2489 13 462

Hey mate, 

what you have in your stylesheet is this (browser-specific properties omitted):

.flex-footer .flex__item {
    flex: 1 1 100%;
}

@media only screen and (min-width: 750px) {
    .flex-footer .flex__item {
        flex: 1 1 20%
    }
}

This means that the elements you want to arrange are trying to claim 100% of parents' width unless the screen is wider than 750px, in which case they are asking only for one fifth of parents width.

You should change this flex: 1 1 100%; to something like flex: 1 1 auto; -- if you have only 2 columns this will be just fine.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes