How can I reduce my mobile view footer size?

Store Design
, , , ,
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
Untitled.png1920×1080 210 KB

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

Untitled2.png
Untitled2.png431×776 25.5 KB

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

Thank you in advance!

2

Can you provide link to the theme you are previewing?

3

Hi @adipure

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

PageFlyNoah_0-1698811078370.png
PageFlyNoah_0-1698811078370.png390×844 25.8 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

4

Hi. @adipure .

Kindly Share your Store URL and password.

5

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

Here is my preview

Thank you

6

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

Here is my preview,

I cant share my password

7

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 tag

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

8

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
websensepro_0-1698878234594.png359×241 10.7 KB

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

9

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.

  1. Save the changes.

I hope the solution helps you.

Please let me know if you need any assistance.

Thank you.

10

Thank you so much your help! problem solved!

11

Thank you !

12

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