Tagged: , , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 20, 2020 at 11:27 pm #1254491
    Kelly Erickson

    Hi Enfold team!

    I am in the forever battle to get my Socket styling narrowed down. Currently I have menu links that are centered and stacked using the following code: 

    @media only screen and (max-width:550px) {
  .responsive #socket .sub_menu_socket {
    display: block !important;
    width: 100%;
  }

  .responsive #socket .sub_menu_socket .menu {
    margin-left: 0;
  }

  .responsive #socket .sub_menu_socket .menu li {
    border: 0;
    display: block;
    float: none;
    text-align: center;
    line-height: 1.7;
  }
}

    I also have some Quick CSS in place that force underlines ALL links on the website with this code: 

    #main a {
text-decoration: underline;
}
#main .sidebar a,
#footer a,
#socket a {
text-decoration: underline;
}
a.avia-button,a span.avia_iconbox_title,#top .av_font_icon a.av-icon-char {
    text-decoration: none!important;
}

    Here are my 3 questions for mobile-only version:
    1) Although the menu links are centered with the code I provided, how do I center the Copyright and Social Media icons, but also stacking the Social Icons below?
    2) How can I increase the size of the Social Media icons on that mobile version only?
    3) Lastly, how can I remove the underline on those Social Media icons? For some reason, nothing I’m trying has worked so far!

    I think my CSS coding is a little pieced together but any suggestions would be amazing. Thanks in advance!

    October 20, 2020 at 11:40 pm #1254494
    Kelly Erickson

    Update! Despite my cache clearing and multiple refreshing, the code I had for centering the Copyright line and social icons did end up working! Here’s what I used (in case anyone needs it for reference): 

    @media only screen and (max-width: 550px) {
  #top #footer .widget_nav_menu li {
    display: block;
  }

  #top #socket .container {
    text-align: center !important;
  }

  #top #socket .social_bookmarks, #socket .copyright {
    float: none;
    display: block;
    margin: 0 auto;
  }

  #top #socket .social_bookmarks {
    text-align: center !important;
  }

  #top #socket .social_bookmarks li {
    float: none;
    display: inline-block;
  }
}

    However the centering is just a little off, it looks like maybe the socket Menu links aren’t quite centering and I’m wondering if there’s some adjusting I can do so it all evenly centers?

    The other two questions remain as well. Thanks!

    October 22, 2020 at 5:42 am #1254833
    Rikard

    Hi,

    Please try this as well, within your media query:

    .responsive #socket .sub_menu_socket {
    margin: 0;
}

    Best regards,
    Rikard

    October 23, 2020 at 2:16 am #1255117
    Kelly Erickson

    Appreciate that – I’ll give it a shot! The other two questions, however, remain:

    2) How can I increase the size of the Social Media icons on that mobile version only?
    3) Lastly, how can I remove the underline on those Social Media icons? For some reason, nothing I’m trying has worked so far!

    Cheers,

    October 24, 2020 at 7:33 am #1255391
    Rikard

    Hi,

    Please try this CSS as well, within your media query:

    #socket .social_bookmarks li a {
  font-size: 16px;
  text-decoration: none !important;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.