How to move footer headers to the left site of the page

[Noissyclth]

Hi everyone!

I have issue with footer headers, I would like to move them to the left site of the page, do you know how to solve this problem? I want them to be in the same position as links, down below i'm attaching photo what I mean 😄

Thanks for help!

My store is currently offline, here is my preview link:

https://cx6mp6-jd.myshopify.com/?_ab=0&_fd=0&_sc=1&key=ca6593fea271bbd2c2290476c5bd09e230cc27ef4a315...

[TheScriptFlow]

Please paste the following code in the end of base.css file.

Go to Shopify Admin > Online Store > Edit Code > base.css

h2.footer-block__heading.inline-richtext {
    text-align: left !important;
}

Results On Desktop: 

Results on Mobile:

Let me know if you need more Help.

Thanks

[namphan · Accepted solution]

Hi @Noissyclth,

Please go to Actions > Edit code > Assets > section-footer.css file and paste this at the bottom of the file:

.footer-block__heading {
    text-align: left !important;
}

result:

[tim]

in your assets/base.css there was this code(https://github.com/Shopify/dawn/blob/main/assets/base.css#L308-L311) :

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

which you've modified like this:

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
  text-align: center;
}

Couple suggestions:

1. For edits like this it's always better to use "Custom CSS" setting of the section in question or "Custom CSS" setting under "Theme settings"

2. If you still decide to edit .css assets, add your edits at the very bottom, preferably with comments so it's easier to troubleshoot later.

3. Do not use very broad selectors like this -- they may apply to the elements you did not want to touch ("Custom CSS" section setting will take care of this automatically).

So, my recommendation is to:

1. In "Edit theme code" remove the "text-align: center;" line from the base.css

2. In "Customize", go to your "Featured collection" section and add this to the "Custom CSS" setting;

h2.title {
  text-align: center;
}

Why this is better?

1. If you do not edit theme code and rather use "Custom CSS" your theme updates will be much easier -- you would not have to transfer your code edits manually (and with code edits like you've done it will be very difficult to remember what was changed).

2. You're not using !important which is considered a last resort.

3. You're removing broad rules which may unintentionally apply elsewhere.

[topnewyork]

 Hi
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
  h2.footer-block__heading.inline-richtext {
    text-align: justify !important;
}
</style>

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!