Center footer on mobile

[bobylands]

Hi!

My website is going very well on desktop but it lacks on mobile. 

How do I center my footer and reduce the size of the font used only for mobile?

I used a freelancer to do the website and I think he used ecomposer for the footer, if that information is necessary.

Url : simplicityclothing.ca

[BSSCommerce-HDL]

Hi @bobylands, 

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: 767px){
 .core__blocks--body .ecom-block.ecom-core.core__block {
    padding-left: 0 !important;
  }
  
  h3.ecom__heading.ecom-db {
    text-align: center !important;
  }
  
  .ecom-newsletter-form-content {
    padding-right: 35px !important;
  }
}
</style>

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 😍

[Huptech-Web]

Hello! @bobylands Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "ecom-668ee937d40aef132f0c3569.css"
6. Add the following code at the end of the file.

@media screen and (max-width: 640px) {
.ecom-core.ecom-r1ionfq50u, html body .ecom-core.ecom-mwa4ki8w1bb .ecom-core.ecom-wtubk9mtq88>div.core__column--wrapper, .ecom-core.ecom-yigcslaikhb {
    padding-left: 0 !important;
}
.ecom-core.ecom-yigcslaikhb .element__heading .ecom__heading {
    text-align: center;
}
.ecom-core.ecom-mwa4ki8w1bb {
    margin-left: 0 !important;
}
.ecom-core.ecom-3p5jihjgjup .ecom-newsletter-form-content {
    flex-direction: row;
}
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you 
K.K

[PageFly-Richard · Accepted solution]

This is Richard from PageFly - Shopify Page Builder App

Hi @bobylands  Please try this code:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
    @media screen and (max-width: 767px){
.ecom-core.ecom-r1ionfq50u {
    padding-left: 34px !important;
    padding-right: 34px !important;
}
.ecom-rfp7kt8vrf .core__column--wrapper{
  padding-right: 34px !important;
 }

.ecom-core.ecom-yigcslaikhb{
        margin-left: -50px !important;
}

.ecom-core.ecom-yigcslaikhb .ecom-element{
display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.ecom-core.ecom-3p5jihjgjup .ecome-shopify__newsletter__button{
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.ecom-iconlist--title{
  font-size: 18px !important;
}
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[bobylands]

Hi this one worked!

Also, how can I reduce the font size and separate them a bit so it's easier to read / more aesthetic?

THanks

[PageFly-Richard]

Hi, please add again code here, it will help you reduce font size and space letters a little further apart:

<style>
    @media screen and (max-width: 767px){
.ecom-core.ecom-r1ionfq50u {
    padding-left: 34px !important;
    padding-right: 34px !important;
}
.ecom-rfp7kt8vrf .core__column--wrapper{
  padding-right: 34px !important;
 }

.ecom-core.ecom-yigcslaikhb{
        margin-left: -50px !important;
}

.ecom-core.ecom-yigcslaikhb .ecom-element{
display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.ecom-core.ecom-3p5jihjgjup .ecome-shopify__newsletter__button{
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.ecom-iconlist--title{
  font-size: 16px !important;
margin-bottom: 8px !important;
}
}

</style>

[bobylands]

Hi, do I replace the code you sent me with this one or do I insert a new one?

[PageFly-Richard]

Hi, You need replace the old code. 
Thanks you.