Joomla Templates Club 406,261 posts

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#202923

Hi,

I noticed that CTA will cause other module (in my case CustomHTML module) shorter even there is a padding.

Example I have added a custom css below to modify padding top+bottom of my two section. When I preview it, one of the section are ok but another one are shorterned. It seems like the CTA cause the problem but I not sure how to fix this.


@media (min-width: 992px) {
.sections-wrap .section {
padding-top: 50px;
padding-bottom: 50px;
}
}

Example > http://prntscr.com/58ab3q

Seek expert. 😀

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#556031

Hi KMF,

Your added custom CSS will affect all sections (modules) having the same class ‘.sections-wrap .section’. So if you want to add this custom css to specific section, you should use module class suffix.

For example, in one of section you want to apply above css, you go to backend settings of module in this section, navigate to “Advanced” tab, and add a class suffix called ‘test’ (remember to add a space before class name)

Then you change above css to:


@media (min-width: 992px) {
.sections-wrap .section.test {
padding-top: 50px;
padding-bottom: 50px;
}
}


[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#556078

Hi Saguaros,

I think my explanation not clear enough.

Ok, I have two message to be slot in between a CTA module, above and below. So I created two CustomHTML and put the message (says Message1, Message2). When under smaller screen view, below are my finding

Test1
===========

Message1 –> The bottom gap shortern
CTA
Message2

Test 2
========
Message2 –> The bottom gap shortern
CTA
Message1

So with this test, what I can think of is that when my customHTML are above that CTA, the bottom gap (or defined padding) will become lesser.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#556272

You can post your site’s URL here and screenshot of how you want it should be, I will suggest you further.

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#556576

See here > http://prntscr.com/5a8sa7

Will pm you site and login

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#556580

Kindly check your site’s URL you sent me again, it seems incorrect: http://prntscr.com/5a8vo8

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#556587

Sent you PM

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#556608

Seems that your hosting limits access from my places, check my PM

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#556652

Pmed you. Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#556735

You can try going to backend settings > Module manager > open the module with ID=531 and add a new class suffix as I mentioned in my 1st reply.

Then add this css rule into ‘custom.css’ file:

@media (min-width: 768px) and (max-width: 991px) {
.section_darkbg.test {
padding-bottom: 70px;
}
}


or change to the value that suits your need.

1 user says Thank You to Saguaros for this useful post

1. Meng Fei Koo

[Meng Fei Koo Friend Meng Fei KooJoin date: September 2014Posts: 76Downloads:0Uploads:2 Thanks: 11 Thanked: 2 times in 1 posts]

#556805

Hi Saguaros,

Ok now it looks better. Thanks

[Author]

Posts