- This topic has 10 replies, 4 voices, and was last updated 5 years ago by Tom.
-
AuthorPosts
-
March 3, 2019 at 10:00 pm #827936Swadhin
Hi there,
I was changing the width of Footer widgets (I want the first two to be 25% -25% and the last one to be 50% on desktop and 100% width of each element in tablet and mobile (meaning on tablet and mobile mode all widgets should be single column).
I saw this code on the page https://docs.generatepress.com/article/footer-widgets/#choosing-different-widths-for-each-widget-area but it confused me further plus I didn’t know how to implement that for 3 widgets.
Please help π
March 3, 2019 at 10:20 pm #827949SwadhinUPDATE:
I added this code and it gives me the result (if not exactly what I wanted) to go with:
It displays 2 widgets on one column on tablet and the third on 2nd column. It is possible to add one in each column for tablet too (like mobile)?
Also, kindly approve that the code I used is good to go.
Thanks
add_filter('generate_footer_widget_1_width','tu_custom_footer_1_width'); function tu_custom_footer_1_width(){ // Return the percentage of this widget width - 25% in this case return '25'; } add_filter('generate_footer_widget_2_width','tu_custom_footer_2_width'); function tu_custom_footer_2_width(){ // Return the percentage of this widget width - 25% in this case return '25'; } add_filter('generate_footer_widget_3_width','tu_custom_footer_3_width'); function tu_custom_footer_3_width(){ // Return the percentage of this widget width - 50% in this case return '50';}
March 4, 2019 at 6:15 am #828240DavidStaffCustomer SupportHi there,
try this CSS:
@media (max-width: 769px) { .inside-footer-widgets div.tablet-grid-50 { width: 100%; float: none; } }
March 4, 2019 at 6:38 am #828258SwadhinHi David,
Thank you for your help.
Should I add this on the filter snippet?
Thanks
March 4, 2019 at 6:42 am #828263DavidStaffCustomer SupportNo, just add it to your CSS.
March 4, 2019 at 8:11 pm #829005SwadhinThanks David, it worked.
-Swadhin
March 5, 2019 at 2:58 am #829206DavidStaffCustomer SupportGlad to be of help
March 10, 2019 at 4:35 am #834426RogerHi David,
I have a similar issue.
I have a three column footer area, each one filled with a different widget content.
In desktop mode it works fine. In tablet/landscape mode the third widget gets pushed downwards.
In tablet/portrait and mobile modus the three widgets show up vertically, keeping their original alignment.What I would like to happen tablet/landscape modus is that the widgets (plus content) shrink so that they all remain on the same horizontal line.
In tablet/portrait mode and mobile I would like them to be in a centered vertical position.
How do I achieve that?Thanks in advance.
AnrobeGeneratePress Premium/Aspire
ElementorMarch 10, 2019 at 10:29 am #834780TomLead DeveloperLead DeveloperHi there,
Give this CSS a try:
@media (min-width:768px) and (max-width:1024px) { .footer-widgets .footer-widget-1, .footer-widgets .footer-widget-2, .footer-widgets .footer-widget-3 { clear: none !important; float: left; width: 33.3333%; } } @media (max-width: 767px) { .footer-widgets { text-align: center; } }
Let me know if that helps or not π
March 11, 2019 at 12:40 am #835161RogerThanks, Tom. It works great!
March 11, 2019 at 9:09 am #835746TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.