Joomla Templates Club 406,261 posts

[nathankeen Friend nathankeenJoin date: October 2017Posts: 4Downloads:3Uploads:0]

#1079045

I have two modules. One in footer-1 and the other in footer-2 position. They display fine on larger screens but when they are single columned on smaller screens, they retain their ‘min-height’ style (set to make each column the same height), and so have large gaps in between them.

E.g. Large screen, 2 columned:

• footer1 footer2
• footer1 footer2
• (gap) footer2
• (gap) footer2

Small screen, single column:

• footer1
• footer1
• (gap) <—- shouldn’t be there
• (gap) <—- shouldn’t be there
• footer2
• footer2
• footer2
• footer2

The min-height is set by some javascript, so I got around it by setting this in a custom.css, but it seems like this is a bug and should be fixed properly.

Here’s my css to overwrite this, at my particular breakpoint (could be different for others):

@media (max-width: 992px) {
  .col-sm-12, .col-xs-12 {
    min-height: initial!important; /* resets min-height property*/
  }
}

I.e. this is ‘solved’ but it would be good to properly fix it.

• This topic was modified 7 years ago by  nathankeen.

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

#1079109

Hi @nathankeen,

You can share the URL and screenshot highlighting the issue, I will check for you.

[nathankeen Friend nathankeenJoin date: October 2017Posts: 4Downloads:3Uploads:0]

#1079293

The problem is slightly hidden, but still there on the demo page: http://www.joomlart.com/demo/#ja_mono

The tweet text in position footer-3 is slightly smaller than the other two footer elements. When you view on a smaller width, you can see that the spacing is not quite right. If you remove min-height, you should be able to see what’s wrong. (It will add itself immediately back, but, it’s enough to see.)

When there is a lot more text in one footer element, as in my case, the problem is A LOT worse.

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

#1079388

Hi,

Do you mean these space? http://prntscr.com/hjr4dg

You can open the file: root/templates/ja_mono(your default template)/css/custom.css (create this file if it doesn’t exist)

add this custom css:

@media (max-width: 767px) {
  .t3-footnav .t3-module {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

then change the padding-top and padding-bottom with your desired value.

Regards

[nathankeen Friend nathankeenJoin date: October 2017Posts: 4Downloads:3Uploads:0]

#1080747

No.

1. Add a whole bunch of text, with many lines to ONE of the footer modules (e.g. contact)
2. View it on mobile

You will see very large gaps in the footer modules that you didn’t add content to, because they are still set – by Javascript with min-height – to equalise when they are side-by-side. However, this JavaScript should be turned off for when they are made into a single column.

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

#1080764

Kindly share screenshots illustrating the modification you expect, I will help you out.

[nathankeen Friend nathankeenJoin date: October 2017Posts: 4Downloads:3Uploads:0]

#1080822

You can do this yourself via the live demo.

1. Add in several extra lines of content via developer tools to ONE footer, like so:
   https://www.sugarsync.com/pf/D6609701_08859726_961260

2. View it with a mobile screen:
   https://www.sugarsync.com/pf/D6609701_08859726_961253

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

#1080880

Hi,

I got your point. The modules in the footer block are assigned to spotlight block which is using the equal height so it can display nicely in desktop view. However, in mobile view, it still keeps that min-height value. You can add this custom CSS to fix the heigh in mobile view:

@media (max-width: 480px) {
.t3-footnav .col:nth-child(2),
.t3-footnav .col:nth-child(3) {
    min-height: 260px !important;
}
}

This style will apply to the second and third module.

Regards

[Author]

Posts