Reduce size of footer in mobile view

[adipure]

Hello,

I'm trying to reduce my footer size but i can not find how to reduce it.
I have been trying to change my CSS file but still have a problem with find exact size that  i want 

Here is my page looks like :

I want to change this footer to half of the size which will looks like this :

So basically i want to my footer looks like this ^
Please help me 

Thank you in advance! 

[makkaomakka]

Can you provide link to the theme you are previewing?

[adipure]

https://2szxwzpv4y045s9y-59329609934.shopifypreview.com 

Here is my preview 

Thank you

[makkaomakka]

Hi @adipure ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </head> tag

<style>
@media (max-width: 789px)
{
    footer .tt-footer-custom:last-child {
    padding: 10px 0px;
}
    a.tt-back-to-top {
    display: none!important;
}
html {
    padding-bottom: 0px!important;
}
}
</style>

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[PageFly-Noah]

Hi @adipure 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (max-width: 767px){
a.tt-back-to-top.tt-show {
display: none !important;
}
}
</style>

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[websensepro]

Hi. @adipure.

Kindly Share your Store URL and password.

[adipure]

https://2szxwzpv4y045s9y-59329609934.shopifypreview.com 

Here is my preview,

I cant share my password

[websensepro]

You can follow these steps:

Go to Online Store -> Themes -> Edit code.

Go to Assets folder -> Base.css  file.

Add the following code at the bottom of the file.

only screen and (min-width: 767px) {

footer .tt-footer-custom:last-child {
    padding: 2px 0px;
}


}

Result:

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

[Anshul_arora · Accepted solution]

Hello @adipure ,

I understand you are looking to reduce the size of the site footer in mobile view.

This can be implemented by following the below mentioned steps -:

1. Go to Online Store -> Themes-> click on 3 dots -> Edit code.

2. Search for the .css or theme.liquid file.

3. Next find the below mentioned code and make the appropriate changes -:

--> Search for the below mentioned media query class and change padding to 0px;

@media (max-width: 789px)
footer .tt-footer-custom:last-child {
background: #ff5f00;
color: #191919;
padding: 0px 0px;
width: 100%;
}

=> https://prnt.sc/627YZxCakuyZ

-->Next find this code in your .css file and change the background color and padding

@media (max-width: 789px)
.tt-back-to-top {
background: white;
color: #ff5f00;
display: block;
width: 100%;
text-align: center;
font-size: 12px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 800;
padding: 5px 0 5px 0;
transition: color 0.2s linear;
}

=> https://prnt.sc/4dvxEtL_aa5z  and if you do not want to display then section (or Back to Top) then change display property to none https://prnt.sc/oJKXsMjam3WU  , when you display: none (Back to top) icon/click will not visible.

4. Save the changes.

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

[adipure]

Thank you so much your help! problem solved!

[Anshul_arora]

Thank you !

[adipure]

I have one more question for the header section.

I'm trying to reduce header height without shrinking my logo but I do not know how. 
Please let me know how to reduce the header size properly.

Thank you