[Resolved] Footer Widget – Tablet Portrait View

[David]

I happened to noticed the footer widget is set to:
<div class="footer-widget-1 grid-parent grid-25 tablet-grid-50 mobile-grid-100">

But in the Customizer Tablet view the Footer Widget for tablet-grid-50 isn’t triggered.

I want the four footer widgets to stack in two columns and not one column.
Test Server: http://cmcwebdev.com/pounders

Thanks for your input.

Cheers!

GeneratePress 1.3.44

[Tom]

Hi David,

The view you’re seeing is the portrait view on tablet, which inherits the mobile styles.

You can adjust this using some CSS:

@media (min-width: 769px) and (max-width:1024px) {
    .footer-widgets .grid-25 {
        width: 50%;
        float:left;
    }
}

Adjust the 769px value to whatever you need.

Let me know if this helps or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David]

This got me the results I am looking for

@media (max-width: 1025px) and (min-width: 768px){
.footer-widgets .grid-25 {width:25%;float:left;clear:none;}
}

Thanks Tom!

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

Hi Tom,
I’m trying to get 3 footer widget in one colum at tablet portrait view (1024×768).

I tried

@media (max-width: 1025px) and (min-width: 768px){
.footer-widgets .grid-33 {width:33%;float:left;clear:none;}
}

and

@media (min-width: 769px) and (max-width:1024px) {
.footer-widgets .grid-33 {
width: 33%;
float:left;
}
}

both are not working.

Any idea?
Best

[Tom]

You want the 3 footers widget to be side by side, or stacked?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

Sorry my fault, I meant side by side.

[Tom]

Try this:

@media (max-width: 768px) {
    .footer-widgets .grid-33 {
        width: 33%;
        float: left;
        clear: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Chris]

No not working, but I tried this

@media (max-width:1024px) {
.footer-widgets .grid-33 {
width: 33%;
float:left;
clear:none;
}
}

.inside-footer-widgets > div:nth-child(2n+1) {
clear: none;
}

That’s working 🙂

Thanks anyway!

[Tom]

Awesome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts