Before you ask please READ THIS

Social Icons mobile devices

in FatMoon Posts: 199
Hello

For some reason when viewing the page on mobile devices (responsive) or in small window on desktop the social media icons center and are located "in the middle" of the screen.. is it possible to place them next to cart, menu etc (see screenshots)
Thanks, Pascal
Bildschirmfoto 2016-09-30 um 11.31.01.png
582 x 466 - 466K
social_icons_placement.jpg
640 x 1136 - 77K

Comments

  • AirAir
    Posts: 9,868
    Hello:-)

    Link please - as always.
    Also what type of header do you use? Which variant?

    With kind regards.
  • Posts: 199
    Hello

    Link is flyart.com as you can see in the screenshot :)
    I use logo centered menu below but it doesn't matter what setting I choose.. desktop regualr appearance is fine.. but mobile or very narrow browser window places it down with any header variant
    Bildschirmfoto 2016-09-30 um 14.15.41.png
    364 x 327 - 24K
  • AirAir
    Posts: 9,868
    FLYART said: but it doesn't matter what setting I choose.. desktop regualr appearance is fine.. but mobile or very narrow browser window places it down with any header variant
    Yes, on very narrow screen we have to be ready for users that added 10 social icons, so they will fit somehow on small screen.
    I will think if I have any idea for setting that could give better layout in your case, when you have one icon and very narrow logo.

    Give me few days(and I don't mean weekend counts ;-) )

    With kind regards.
  • Posts: 199
    Hello .. I see your point!
    I you have an idea that would be great of course.. if not I'll just hide social icons in responsive mode ;)

    Thanks, Pascal
  • Posts: 199
    by the way: I would mind if the social icon always is before "cart", "search" and "menu" icons
    Thanks
  • Posts: 199
    By the way2: I am leaving for 2 weeks and page will be in maintenance mode. Not a problemfor you since you have access to admin.. just you are informed.. thanks again
  • AirAir
    Posts: 9,868
    I think that for now it would be better if I would prepare solution for you specially. However I see that you have changed header variant and I don't know which one you will be finally using.

    Anyway, for your current header try this custom css:

    @media only screen and (max-width: 600px) {
    .header-type-multi_line .top-head {
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    align-items: center;
    }
    .header-horizontal #header-tools {
    padding-left: 0;
    width: auto;
    order: 2;
    }
    .header-horizontal .head .socials {
    order: 1;
    }
    }
    I know it is not perfect but it can get you very close.

    With kind regards.
  • Posts: 199
    Hi
    I just came back and tried your solution.. works fine for me! thank you very much!!
    Pascal
  • Posts: 199
    oops.. I was a little too fast, osrry about this... it works perfectly when using mobile devices but when I have a very small brwoser window on a desktop it remains centered below as before (see screenshot)
    thanks, pascal
    Bildschirmfoto 2016-10-17 um 14.15.14.png
    510 x 954 - 916K
  • AirAir
    Posts: 9,868
    Try changing this part of code @media only screen and (max-width: 600px) { to higher value then 600px, for example to 1024.

    With kind regards.
  • Posts: 199
    That was the solution! Thanks!!
  • Posts: 199
    Hello
    It's been a while but unfortunately after the last update to 1.5.2 the neat little css code snippet you prgrammed for me to place the Facebook icon right with mobile devices doesn't do its job anymore (see screenshot).. any help possible?
    Thanks, Pascal
    Bildschirmfoto 2017-12-01 um 18.13.09.png
    556 x 669 - 450K
    Bildschirmfoto 2017-12-01 um 18.16.32.png
    384 x 345 - 39K
  • AirAir
    edited December 2017 Posts: 9,868
    Hi there:-)

    From what I see code I gave you works fine still, cause in that code social icon supposed to be on the left, form other icons/tools. However if you want to change that, remove rule order: 2;

    With kind regards.
    Post edited by Air on
  • Posts: 199
    Hi there
    Thank you.. but I must have not formulated my question well :) Social icon shoudl still remain left but when screen ist 600px wide or less the header tools and social icon get "messy" instead of staying in one line and there is enoguh room. see screenshot... I hope that makes more sense now?¨
    Thanks
    header-tools-and-social-flyart.jpg
    1219 x 848 - 207K
  • AirAir
    Posts: 9,868
    Try adding such custom CSS:
    @media only screen and (max-width: 600px) {
        .header-horizontal .logo-container{
            width: auto;
        }
        .header-horizontal .head .socials{
            margin-left: auto;
        }
        .header-horizontal #header-tools {
            margin-left: 0;
        }
    }
    Should do it.
    You have experienced changes, cause we implemented solution that I prepared for you into code, however without reverting social icons order.

    With kind regards.
  • Posts: 199
    All right.. I understand what happend now.. and thanks for the CSS.. that did the trick!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!