Solved

How can I reduce my mobile view footer size?

adipure
Tourist
14 0 1

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 :

 

Untitled.png

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

Untitled2.png


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

Thank you in advance! 

 

Accepted Solution (1)

Anshul_arora
Navigator
364 103 71

This is an 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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 11 (11)

theycallmemakka
Shopify Partner
1476 336 359

Can you provide link to the theme you are previewing?

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

adipure
Tourist
14 0 1

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

 

Here is my preview 

 

Thank you

theycallmemakka
Shopify Partner
1476 336 359

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

PageFly-Noah
Astronaut
1079 197 215

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>

PageFlyNoah_0-1698811078370.png

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

websensepro
Shopify Partner
1040 144 149

Hi. @adipure.

 

Kindly Share your Store URL and password.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
adipure
Tourist
14 0 1

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

Here is my preview,

I cant share my password

websensepro
Shopify Partner
1040 144 149

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:

websensepro_0-1698878234594.png

 

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

 

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Anshul_arora
Navigator
364 103 71

This is an 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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
adipure
Tourist
14 0 1

Thank you so much your help! problem solved!

Anshul_arora
Navigator
364 103 71

Thank you !

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
adipure
Tourist
14 0 1

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