Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 3, 2018 at 10:24 pm #1017619
    Max

    Hi everyone,

    I am trying to display the footer menu in a left aligned style on mobile devices.
    I added the following code to the CSS area to customize the footer menu. That looks fine:

    
#socket .sub_menu_socket {
    float: none !important;
}
#socket .sub_menu_socket ul {
    text-align: center;
    margin-bottom: 6px;
}
#socket .sub_menu_socket li {
    float: none !important;
    display: inline;
}
footer a {
font-size: 14px;
}

    But what do I have to add to show the menu left aligned on mobile devices?

    Thanks a lot in advance!
    Best regards
    Max

    October 4, 2018 at 4:01 am #1017657
    Mike

    Hey Max,
    Thank you for the links, first please replace your css with this:

    @media only screen and (min-width: 767px) { 
#socket .sub_menu_socket {
    float: none !important;
}
#socket .sub_menu_socket ul {
    text-align: center;
    margin-bottom: 6px;
}
#socket .sub_menu_socket li {
    float: none !important;
    display: inline;
}
}

    This will tell the browsers that your socket links will be different for mobile devices.
    Then please add this css:

    @media only screen and (max-width: 766px) { 
#socket .sub_menu_socket li {
    float: left !important; 
    display: block !important; 
    width: 100% !important; 
    text-align: left !important; 
}
}

    Then Please clear any cache plugin and your browser cache and check.

    Best regards,
    Mike

    October 4, 2018 at 6:35 pm #1017988
    Max

    Hi Mike,

    thank you very much for the fast reply! It works well!
    I added three parameters to change the line height as well as the font size. It looks okay, but maybe you could double check it :)

    
@media only screen and (min-width: 767px) { 
#socket .sub_menu_socket {
    float: none !important;
}
#socket .sub_menu_socket ul {
    text-align: center;
    margin-bottom: 6px;
    font-size: 14px;
}
#socket .sub_menu_socket li {
    float: none !important;
    display: inline;
}
}

@media only screen and (max-width: 766px) { 
#socket .sub_menu_socket li {
    float: left !important; 
    display: block !important; 
    width: 100% !important; 
    text-align: left !important; 
    font-size: 14px;
    line-height: 1.5;
}
}

    Best regards and thanks
    Max

    Edit: Should I save this CSS addition in a separate file in the child theme or is it sufficient to place it in the “Quick CSS” area?

    October 4, 2018 at 11:46 pm #1018042
    Jordan Shannon

    Hi,

    It should be just fine in the css area, thats were I usually recommend for users. And, as long as the line-height looks good for you visually, then I would say its great!

    Best regards,
    Jordan Shannon

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