Okay
  Public Ticket #392265
social icon
Closed

Comments

  • Frode started the conversation
    March 13, 2015 at 2:52pm

    From 960px width and below the social icon gets placed on a separate line, making the footer wrapper almost twice as high and this is not looking good on mobile view. How can I avoid this?

  •  296
    Paul replied
    March 14, 2015 at 7:12am

    Hi,

    Did you mean you wanted to reduce the size of social icon on < 960px res?

    Please try using custom CSS with media queries like this:

    @media only screen and (max-width: 960px) {
ul.bar-social img {
    height: auto;
    width: 15px;
}
}

    Note that you can check out this FAQ for how to adjust the CSS on various viewport sizes: https://uxbarn.ticksy.com/faq/2591

    Regards,
    Paul

  • Frode replied
    March 16, 2015 at 11:53am

    Hi Paul

    No, I was not trying to make the socila icon smaller, sorry for my bad description. What I need is to get the social icon on the same line as the copyright text so that the wrapper background dont get dobuble in hight, see att. image


    Regards, Frode

  •  296
    Paul replied
    March 17, 2015 at 6:51am

    Please try this:

    @media only screen and (max-width: 960px) {

    #copyright {
        display: inline-block;
        margin: 0;
    }
        
    ul.bar-social {
        display: inline-block;
    }
    
}

    This should help. :)

  • Frode replied
    March 17, 2015 at 12:16pm

    Well, that seem to help on the homepage, but still on the other pages, the fb-icon drops down to the line beneath

    I tried adding this also:
    @media only screen and (max-width: 580px) {
    #side-footer-wrapper {
    font-size: 10px;
    padding: 5px;
    }
    }

    but still the other pages on http://vikenmidtre.no/ have this problem, see screenshot

  •  296
    Paul replied
    March 18, 2015 at 9:02am

    OK, try adding "!important" for attributes so as a result, it will be like this:

    @media only screen and (max-width: 960px) {

    #copyright {
        display: inline-block !important;
        margin: 0 !important;
    }
        
    ul.bar-social {
        display: inline-block !important;
    }
    
}

    This will force it to use this setting and should work on other pages.

  • Frode replied
    March 18, 2015 at 11:50am

    Yup, that fixed it

    Thanks alot for your help Paul, very grateful!

  •  296
    Paul replied
    March 19, 2015 at 7:12am

    You're welcome Frode!