Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 8, 2018 at 2:53 pm #994979
    Sophie

    Hello,

    in your support forum I found some custom CSS to center the socket copyright and social icons on smartphones portrait and landscape. But what I could not find out exactly is, how to center the socket sub menu.

    I tried the following code:

    
@media only screen and (max-width:467px) {
#socket .sub_menu_socket {
  position: relative;
  left: 23%;
}
}

@media only screen and (max-width:767px) and (min-width: 467px) {
#socket .sub_menu_socket {
  position: relative;
  left: 35%;
}
}

    but that is not working for all small devices due to the percentage. Also, I would like to center all this (socket copyright, social icons and sub menu) for tablet portrait as well.

    Can you help me with this? Would be great!

    Wish for you a nice day!

    Best regards,
    Sophie

    August 9, 2018 at 7:56 am #995267
    Nikko

    Hey Sophie,

    Can you try using this css code:

    @media only screen and (max-width:959px) {
  #socket .sub_menu_socket {
    float: none;
    width: 100%;
    clear: both;
  }

  #socket .sub_menu_socket #avia3-menu {
    margin: 6px 0;
    text-align: center;
  }

  #socket .sub_menu_socket #avia3-menu li {
    float: none;
    display: inline-block;
  }
}

    Hope it helps.

    Best regards,
    Nikko

    August 9, 2018 at 5:09 pm #995620
    Sophie

    Hey Nikko,

    thank you so much for your kind help. It is nearly working :-) . The following code is what I have so far to center the social copyright, social icons and sub menu in the socket of smartphone portrait and landscape as well as of tablet portrait:

    
@media only screen and (max-width:959px) {
  #socket .copyright {
    display: block;
    float: none;
    padding-top: 40px;
    text-align: center;
    width: 100%;
  }}

@media only screen and (max-width:959px) {
  #top #wrap_all #socket .social_bookmarks {
    float: none;
    margin: 0;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
  }

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

@media only screen and (max-width:959px) {
  #socket .sub_menu_socket {
    float: none;
    width: 100%;
    clear: both;
  }

  #socket .sub_menu_socket #avia3-menu {
    margin: 6px 0;
    text-align: center;
  }

  #socket .sub_menu_socket #avia3-menu li {
    float: none;
    display: inline-block;
  }
}

    but it’s not centered perfectly on smartphone portrait and landscape as well as on tablet portrait. I know it seems to be just one small issue left, but I can’t figure out. Can you help me out with that?

    Thank you so much for all your efforts.

    Best regards,
    Sophie

    August 10, 2018 at 1:27 pm #995942
    Victoria

    Hi Sophie,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 768px) and (max-width: 959px) {
  #top #wrap_all #socket .social_bookmarks {
    width: 89%;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 10, 2018 at 2:02 pm #995970
    Sophie

    Thank you, Victoria. That ist working fine :-) . You can close this topic now.

    Have great day!

    Best regards,
    Sophie

    August 10, 2018 at 5:14 pm #996078
    Victoria

    Hi Sophie,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 15, 2018 at 4:52 pm #997603
    Sophie

    Thank you, Victoria. You can close this topic now :-) .

    Wish for you a great day!

    Best regards,
    Sophie

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to center socket on all smartphones and tablet portrait’ is closed to new replies.