How to increase padding between sections in mobile

Chi-K

Its a little tight in the mobile view. How can we add paddings between the sections to give more space to "breathe"

saguaros

You can override with this custom css:

@media(max-width: 575.98px) {
    div[id*=t4-section-],div[id^=t4-section-] {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

and change to your desired value.

Chi-K

Can this be made into sort of a class that i can add on to the sections to selectively control the padding between sections. I also notice its affecting only sections that are white, like section-2, 6, 8, but wont affect dark blue ones like section 7. It also impacts section 9 and adds a white padding which isnt ideal, so wondering if it were made into a class instead.

dominic

Hi Chi-K,
Yes, you can add the class name to the Advanced > Module Class and use the following CSS code:
Eg: I'm added the mobile-space class


@media(max-width: 575.98px) {
.t4-section .t4-section-inner.mobile-space {
    padding-top: 40px;
}

.t4-section .t4-section-inner.mobile-space .top-articles-info {
    padding-bottom: 40px;
}
}

Chi-K

Hi it did not work for "latest success stories" and "Testimonials" modules. It worked for the rest though

dominic

Hi Chi-K,
I have checked the CSS in the custom.css file and see that you missing the "}". in this code:

@media(max-width: 575.98px) {
  .t4-section .t4-section-inner.mobile-space {
      padding-top: 40px;
  }

  .t4-section .t4-section-inner.mobile-space {
      padding-bottom: 40px;
  }
}

Also, to change the padding for the Testimonials module, you can use the following CSS code:

@media(max-width: 575.98px) {
.acm-testimonial.style-1.mobile-space {
   padding: 40px 0;
}
}

Chi-K

Just one more left, the "Why Choose Us" padding not work.

dominic

Hi Chi-K,
I have updated the code here: /templates/ja_alpha/acm/hero/tmpl/style-2.php
Line 69:
$moduleclass_sfx = $params->get('moduleclass_sfx','');

line 72:
<div id="acm-hero-<?php echo $mod; ?>" class="acm-hero style-2 bg-<?php echo $bgColor; ?> <?php echo $moduleclass_sfx; ?>">

And the CSS code:

@media(max-width: 575.98px) {
.acm-testimonial.style-1.mobile-space,
.acm-hero.style-2.mobile-space {
   padding: 40px 0;
} 
}