[Resolved] changing breakpoint for footer widgets (in tablet landscape view)

[joecocker]

Hi Tom, I often have three footer widgets on a site and realized that their mobile breakpoint for to show just two of them in a row is coming a little a bit too early (just for my taste and their narrow content, most of the time 😉 So my question is:

“How can I change the breakpoint of the footer widgets especially in (iPad e.g.) tablet landscape view from showing just two widgets to three in a row??” as there often is just enough room for them…

Thanks for help – it would fit many sites I guess.
Jürgen

[Tom]

Hi there,

You can customize it with this CSS:

@media (max-width: 1024px) {
	.inside-footer-widgets > div {
		margin-bottom: 0;
	}
	
	.active-footer-widgets-3 .inside-footer-widgets > div {
		width: 33.3333%;
	}
}

Let me know if you need more info 🙂

[joecocker]

Fantastic, Tom! Your solution and the speed in which you are answering support questions! Absolutely astonishing and satisfying! It was my best decision ever to buy your GP Premium Offer, really! :))

Back to the topic. I just added (by guessing 😉 the following and it works like a charm now, even on smartphones (they where included and got too narrow) – now everything looks perfect.

/* 3 Cols Footer widgets on tablets in landscape view */

@media (max-width: 1024px) {
.inside-footer-widgets > div {
margin-bottom: 0;
}

.active-footer-widgets-3 .inside-footer-widgets > div {
width: 33.3333%;
}
}

/* but still 1 Col Footer widgets on phones in */

@media (max-width: 480px) {
.inside-footer-widgets > div {
margin-bottom: 20px;
}

.active-footer-widgets-3 .inside-footer-widgets > div {
width: 100%;
}
}

[joecocker]

Please have a look here: http://aeterna-lichte.com

On iPad and iPhone I think this CSS rule would fit most of the time and could reside in your base CSS?!

Thank you! 🙂 Jürgen

[Tom]

Glad I could help!

It depends on what’s added to those widgets really, but I’ll do some playing around to see if I can find something better 🙂

[Peter]

Thanx for this thread.

I found that I also had to reset the clear:both from the second div to make it work:

/* 3 Col Footer widgets next to each other on tablets in landscape view */

@media (max-width: 1024px) and (min-width: 768px) { 
  
  .inside-footer-widgets > div {
    margin-bottom: 0; 
  }

  .inside-footer-widgets > div:nth-child(odd) {
    clear: none;
  }	

  .active-footer-widgets-3 .inside-footer-widgets > div {
    width: 33.3333%;
  }

}

[Leo]

Glad you figured out!

We can probably use flexbox for this as well now.

[Author]

Posts