Archived topic
changing breakpoint for footer widgets (in tablet landscape view)
6 replies · Started by joecocker on May 2, 2016
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
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 :)
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%;
}
}
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
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 :)
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%;
}
}Glad you figured out!
We can probably use flexbox for this as well now.
