Footer contents align,

[Sohan2198]

Hello, 
How can I fix the footer menu content by spacing , 
I want like this,

I have right now

Url:https://www.zisthi.com/
pass:Zisthi0206

[BSSCommerce-HDL · Accepted solution]

Hi @Sohan2198, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.footer-block__details-content.rte {
    padding-right: 49px !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B · Accepted solution]

@Sohan2198 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
.footer-block.grid__item.scroll-trigger.animate--slide-in * {
    text-align: center;
    padding: 0;
    margin-right: 0;
    margin-left: 0;
    display: block;
    width: 100%;
}
  div#shopify-section-sections--15703122346071__footer .list-menu__item--link{
    font-size: 1.5rem;
    letter-spacing: 0.06rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
    font-family: var(--font-body-family);
    font-style: var(--font-body-style);
    font-weight: var(--font-body-weight);
  }
</style>

Result:

Desktop

Mobile

[Sohan2198 · Accepted solution]

@BSSCommerce-HDL 
In mobile view the contents is overlap

[BSSCommerce-HDL · Accepted solution]

Hi @Sohan2198, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 749px) {
a.link.link--text.list-menu__item.list-menu__item--link {
    font-size: 15px !important;
    margin-bottom: 15px !important;
}
}
</style>

 Here is result :

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @Sohan2198, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.footer-block__details-content.rte {
    padding-right: 49px !important;
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Sohan2198 · Accepted solution]

@BSSCommerce-HDL 
In mobile view the contents is overlap

[BSSCommerce-HDL · Accepted solution]

Hi @Sohan2198, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 749px) {
a.link.link--text.list-menu__item.list-menu__item--link {
    font-size: 15px !important;
    margin-bottom: 15px !important;
}
}
</style>

 Here is result :

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-B2B · Accepted solution]

@Sohan2198 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above </body>

<style>
.footer-block.grid__item.scroll-trigger.animate--slide-in * {
    text-align: center;
    padding: 0;
    margin-right: 0;
    margin-left: 0;
    display: block;
    width: 100%;
}
  div#shopify-section-sections--15703122346071__footer .list-menu__item--link{
    font-size: 1.5rem;
    letter-spacing: 0.06rem;
    line-height: calc(1 + 0.8 / var(--font-body-scale));
    font-family: var(--font-body-family);
    font-style: var(--font-body-style);
    font-weight: var(--font-body-weight);
  }
</style>

Result:

Desktop

Mobile

[Made4uo-Ribe · Accepted solution]

Hi @Sohan2198 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (min-width: 989px){
.footer-block.grid__item.footer-block--menu {
    width: min-content;
}
.footer-block.grid__item:not(.footer-block.grid__item.footer-block--menu) {
    width: 15%;
    margin-right: 40px;
}
}

And Save. 

result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!