Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 9, 2016 at 2:08 pm #595556
    Jasmer

    Hi!

    1. I have a problem with my social icons on mobile devices. They do not fit.

    2. I think they need to be like this site below (see 2. below). Icons probably need to be in the header in their own section.
    However I do not want this change to appear on the desktop site, only the mobile site.

    3. I will have to remove this to add what you suggest

    .responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks {
	display: block !important;
	top: 43px !important;
} /*icons postion*/

    Do you have any other suggestions to deal with this problem?

    Thank you,

    Jasmer

    March 14, 2016 at 9:48 am #597627
    Ismael

    Hi Jasmer!

    Thank you for the info.

    Please add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    padding-top: 20px;
}

.responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks {
    display: block !important;
    top: 0!important;
}
}

    This code will move the social icons on top of the logo and mobile menu icon.

    Cheers!
    Ismael

    March 15, 2016 at 10:51 am #598293
    Jasmer

    HI Ismael,

    1. I added CSS right: 40px; to center it perfectly and adjusted padding a little. See below. But on the iPhone 4s and Android HTCone the icons are wrapping. Is there anyway to stop this? See screenshot below. This is the CSS I used. Is it wrong?

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    padding-top: 25px;
}

.responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks {
    display: block !important;
    top: -5px!important;
    right: 40px;
}
}

    2. I’d like a white horizontal rule between the icons and the logo. How can I add this? (Once I solve the above #1 problem)

    Thank you,

    Jasmer

    • This reply was modified 8 years, 9 months ago by Jasmer. Reason: added screenshots
    March 18, 2016 at 11:54 am #600227
    Ismael

    Hey!

    1.) Add another css media query to target those devices. Decrease the padding between the social icons in order to create more space.

    2.) Try this:

    #top .av_header_glassy.av_header_transparency #header_main {
    border-top: 1px solid #ffffff !important;
}

    Cheers!
    Ismael

    March 23, 2016 at 11:59 am #602457
    Jasmer

    Thanks I didn’t like the horizontal rule so I removed it.

    Also I’m not sure it is necessary to move the icons closer together. It seems if I just move the icons to the left, the other two icons that are wrapping will move back to the top line. Can you help me with that? Still learning.

    Something like this?

    @media only screen and (max-width: 480px) {
#header_main .social_bookmarks {
position:??
left:??

    Also if you don’t mind provide me with the CSS that moves the icons closer together in case I need that.

    March 26, 2016 at 8:33 am #603792
    Ismael

    Hi!

    Sorry for the delay. Use this to move the icons closer:

    @media only screen and (max-width: 480px) {
#top #wrap_all .social_bookmarks, #top #wrap_all .social_bookmarks a, #top #wrap_all .social_bookmarks li {
    margin-left: -5px;
}
}

    Include this inside the media query above if you want to move the position of the social icon container:

    .responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks {
    top: -5px !important;
    left: 0;
}

    Adjust the values as needed.

    Best regards,
    Ismael

    March 29, 2016 at 11:02 am #604358
    Jasmer

    Ok this worked. How do I center these icons. They are almost ok on a iPhone 6s and iPhone 6 but not ok on a iPhone 4s and 5s. They are to the left. Is there a way to center these on all devices?

    Thank you,

    Jasmer

    March 30, 2016 at 4:37 am #604918
    Ismael

    Hi!

    Add this:

    @media only screen and (max-width: 767px) {
.responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks {
    display: block !important;
    top: -5px!important;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
}
}

    Reference: https://css-tricks.com/centering-percentage-widthheight-elements/

    Best regards,
    Ismael

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