Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 26, 2019 at 6:07 am #1059015
    Kelly Erickson

    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 #1059193
    Jordan Shannon

    Hey 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 Shannon

    January 28, 2019 at 4:31 am #1059500
    Kelly Erickson

    Thanks 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 #1059561
    Vinay

    Hi,

    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,
    Vinay

    January 28, 2019 at 7:50 pm #1059776
    Kelly Erickson

    SO 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 #1061365
    Kelly Erickson

    Hey all! Just checking in ❤

    February 1, 2019 at 8:59 am #1061420
    Ismael

    Hi,

    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,
    Ismael

    February 2, 2019 at 7:47 pm #1062046
    Kelly Erickson

    I 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 #1062613
    Ismael

    Hi,

    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,
    Ismael

    February 20, 2019 at 2:14 am #1069237
    Kelly Erickson

    This 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 #1069771
    Nikko

    Hi 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,
    Nikko

    February 21, 2019 at 4:41 am #1069776
    Kelly Erickson

    You are THE BEST. The best support team ever. Thank you!!

    February 21, 2019 at 1:01 pm #1069910
    Nikko

    Hi 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

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Center footer widgets in mobile only’ is closed to new replies.