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

Home Forums Support changing breakpoint for footer widgets (in tablet landscape view)

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #191151
    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

    #191159
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #191347
    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%;
    }
    }

    #191348
    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

    #191373
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #550415
    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%;
      }
    
    }
    #550535
    Leo
    Staff
    Customer Support

    Glad you figured out!

    We can probably use flexbox for this as well now.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.