![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: center
-
AuthorPosts
-
January 26, 2019 at 6:07 am #1059015
Hi there!!
I am looking to center the footer widget content on mobile versions only – I was able to do that with the following code:
@media only screen and (max-width: 680px) { #footer .widget { text-align: center; }}
BUT in the middle (second for three) widget I have some social icons – those are not centering on the mobile version.
Your help is be much appreciated!
January 26, 2019 at 5:32 pm #1059193Hey kellyCraftMedia,
Adjust your css to the following:
@media only screen and (max-width: 680px) { #footer .widget { text-align: center; } .textwidget p:nth-child(5){ margin-left:35%!important; }}
Best regards,
Jordan ShannonJanuary 28, 2019 at 4:31 am #1059500Thanks Jordan! But the social icons aren’t QUITE center and the other widget (the 2nd/middle of 3) with the hours got a little screwy! See screenshot link in private notes.
Cheers!
January 28, 2019 at 10:15 am #1059561Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
CSS Snippet:
/* CSS - */ #footer .widget p:nth-child(5) { text-align: center; display: flex; justify-content: center; }
Best regards,
VinayJanuary 28, 2019 at 7:50 pm #1059776SO close!
Everything looks great except for on all Mac products – the included screenshot is taken in Safari. The mobile versions are good, just the desktop footers are a little off.
Thank you!
February 1, 2019 at 6:01 am #1061365Hey all! Just checking in ❤
February 1, 2019 at 8:59 am #1061420Hi,
You need to move this css code:
#footer .widget p:nth-child(5) { text-align: center; display: flex; justify-content: center; }
… inside the mobile css media query because it is affecting the desktop view.
Best regards,
IsmaelFebruary 2, 2019 at 7:47 pm #1062046I gave that a try but nothing is working.
I reverted back to my original code since it looks better for now – so I’m back to the original problem where the social media icons are not centering in mobile view (the rest of the footer is fine!)
Thank you,
February 4, 2019 at 11:40 am #1062613Hi,
Thanks for the update.
Use this css code to center align those icons.
@media only screen and (max-width: 768px) { #footer .widget#text-3 .textwidget p { display: inline-block; } }
Best regards,
IsmaelFebruary 20, 2019 at 2:14 am #1069237This is great! There’s a little bit of extra space to the right of the last icon – how would I get rid of that for just that icon?
Thanks!
February 21, 2019 at 4:13 am #1069771Hi kellyCraftMedia,
Try adding this also inside the media query:
#footer .widget#text-3 .textwidget p .av_font_icon { display: inline-block; float: none; }
Best regards,
NikkoFebruary 21, 2019 at 4:41 am #1069776You are THE BEST. The best support team ever. Thank you!!
February 21, 2019 at 1:01 pm #1069910Hi kellyCraftMedia,
Thanks for your kind words, we appreciate it :)
Glad that we could help.
Thanks also for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Center footer widgets in mobile only’ is closed to new replies.