footer 5 blocks to fit in a single row and aligned Dawn theme

[floweractually]

Hi,

I tried to add the fifth block to my footer but it won't fit in a single row (1st pic). I would like to make it like the given picture below (2nd pic). It will be highly appreciated if I could be provided guidance on how.

[RockTechnolabs]

Hi @floweractually please add the 5th block and add below CSS code in base.css file at the bottom.

<style>
@media screen and (min-width: 750px){
    .grid--4-col-tablet .footer-block.grid__item {
        width: calc(20% - var(--grid-desktop-horizontal-spacing) * / 5) !important;
    }
}
</style>

Result: 

If I managed to help you then, don't forget to Like it and Mark it as a Solution!

Best Regards,
Rock Technolabs

[Artzen_tech]

Hello @floweractually 
Its Artzen Technologies! We will be happy to help you today.

Add the 5th block through customize
Online Store-> Themes-> Customize

and add below CSS code in base.css file at the bottom.
Online Store-> Themes-> EditCode-> Base.CSS file

<style>
@media screen and (min-width: 750px){
    .grid--4-col-tablet .footer-block.grid__item {
        width: calc(20% - var(--grid-desktop-horizontal-spacing) * / 5) !important;
    }
}
</style>​

RESULT AFTER THE ABOVE PROCESS

Let me know if need further assistance
Regards,
Artzen Technologies

[floweractually]

Thank you for your prompt reply! I added your code at the end of the base.css file but it doesn't work. I am currently working on Dawn 11.0 and would it be any different ?

[Artzen_tech]

Please try this CSS

<style>
@media screen and (min-width: 750px){
.grid--4-col-tablet .footer-block.grid__item {
width: 20%!important;
}
}
</style>​

And if you have further query then feel free to ask

[floweractually]

still doesn't work

https://www.floweractually.com/?_ab=0&_fd=0&_sc=1

[floweractually]

[RockTechnolabs]

@floweractually Share this theme URL

[floweractually]

https://www.floweractually.com/?_ab=0&_fd=0&_sc=1

[RockTechnolabs]

it's still the same theme there are no 5 blocks their

[floweractually]

https://9nwjb4miuihypkn4-24690163805.shopifypreview.com

[RockTechnolabs · Accepted solution]

@floweractually  Please add this 

<style>
.footer__content-top {
    max-width: 100% !important;
}

@media screen and (min-width: 750px) {
    .footer__content-top .grid--3-col-tablet .grid__item {
        width: calc(20% - var(--grid-desktop-horizontal-spacing) * 5 / 5) !important;
    }
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as a Solution!

Best Regards,
Rock Technolabs

[floweractually]

Great! It works! but is there any chance that you could show me how to align the row to make it neat 

https://9nwjb4miuihypkn4-24690163805.shopifypreview.com