Archived topic
Footer Widget - Tablet Portrait View
9 replies · Started by David on February 14, 2017
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!
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 :)
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!
No problem! :)
Hi Tom,
I'm trying to get 3 footer widget in one colum at tablet portrait view (1024x768).
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
You want the 3 footers widget to be side by side, or stacked?
Sorry my fault, I meant side by side.
Try this:
@media (max-width: 768px) {
.footer-widgets .grid-33 {
width: 33%;
float: left;
clear: none;
}
}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!
Awesome :)
