Ascend Theme: Space Between Widget Sections in Mobile View Footer

Bagikan:

Ascend Theme is great WordPress theme with so many future-able features. As you know, this site used this time with some customization. Thanks for Kadence WP as developer and make it free in WordPress.

Problem in Ascend Theme

Features you will get in this time is sticky header menu, responsive design for all views (desktop and mobile), dropdown menu with arrow,  and exactly which make easy is demo content 😀

At first installation, I had have a problem in space between footer in mobile view. Desktop view was fine, clearly. The problem was like this.

Ascend Theme Space Between Footer in Mobile View

I have four widget sections in the footer. As you see in the pic above, there is no space between widget section in mobile view. I give red mark over there.

Giving Space (Margin) Between Widget Sections in Footer

I’ve tested in several browser in my mobile phone, and had the same result. The solution for this problem is customize CSS theme. So, let’s do that. We will give margin code to add space between widget sections. 

  1. Login to your dashboard in your WordPress site. As you remember, I use four widget sections. If you use three or less, just adjust the code.
  2. Go to Appearance menu > Theme Options. Sorry, I used language in Bahasa Indonesia. So, the text in menu will be different. Never mind, this article will guide you in English 🙂
  3. In theme options page, scroll it down and go to Custom Css.
    Custom CSS menu in theme options
  4. Let’s add customization code.  The first widget section in the footer should be no margin. First widget section is in the top position.  Take a look at this pic.
  5. As you see, we should add the margin code in second, third, and fourth widget section.
@media (max-width: 768px){
.col-md-3.col-sm-6.footercol2 {
    margin: 30px 0;
    }

.col-md-3.col-sm-6.footercol3 {
    margin: 30px 0;
    }

.col-md-3.col-sm-6.footercol4 {
    margin: 30px 0;
    }

}

Explanation:

  • @media (max-width: 768px) is code for mobile view. We will custom margin in mobile view only. The deskop view was clear.
  • .col-md-3.col-sm-6.footercol2 is second widget section in footer. The footercol2 is the default name in this theme. You can check the name in view source of your site.
  • margin: 30px 0; is the code to add margin in between widget section. You can change the number to give more space.

If you have three or less widget section in your footer, just remove the footercol… code in your customization css above.

Don’t forget to click Save Changes in theme options page and let’s see your site in mobile view. If you have margin in widget section oof your footer, the code was work correctly.

If you have any problem, please do not hesitate to ask in the comment below. Happy code! 😀