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?
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
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?
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
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
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. :)
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
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.
Yup, that fixed it
Thanks alot for your help Paul, very grateful!
You're welcome Frode!