Alignment Issue

  • Resolved Nymphalis

    (@nymphalis)


    8 years, 8 months ago

    Hi, I’m wondering if anyone can help me with what is a fairly minor issue. I can’t seem to get the social icons and the nav menu to line up on the right.
    Here’s the link to the site: thewoodendahlia.com
    I’ve got this in my custom css:

    .navbar-inner .social-block {
float: right;
margin-top: 10px;
margin-right: 0px;
padding-right: 0px;
text-align: right;
}

    I added the padding myself, without it, the social icons are even farther to the left than they are now, but with everything I’ve tried, they just won’t align with that menu. I’ve tried negative values, adding other padding, playing with the margins, several other snippets but this is as close as I’ve gotten, and it’s still just enough off to bother me lol
    Thanks in advance!

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi,

    I took a look at your sight in Google Chrome. In Chrome if you right click over the social icons, you can select an option that says inspect. This will pull up the developer options in Chrome. While this might not provide you with an immediate direct solution, it will allow you to have more insight into the issue. Once you’ve gone over to the social icons and right clicked and then select inspect you will see the following code pop up on the right hand side of the screen:

    <div class=”span3 social-block pull-left”><span class=”tc-footer-social-links-wrapper”></span></div>

    Where it says pull-left, if you replace that with pull-right. The icons will then float on the right side of the page as you’ve intended. I’ve `confirmed this by making the change on my end with the Chrome dev tools.

    I would recommend going into the theme template and searching for that code to make the change permanent on your end. If you post in reply to this I will get an email alert. Let me know if this works for you.

    Hi,
    Try adding this to your child theme’s style.css

    .row-fluid [class*=span]:first-child {
	margin-right:-10px; //ADJUST
}
    Thread Starter Nymphalis

    (@nymphalis)

    Okay, so, I was never able to find that code and believe me, I looked through every file I had that even hinted it might have something to do with the header lol
    However, the dev tools absolutely helped me. The problem was the padding on the social icons themselves, each one had default padding on the right side, presumably to leave spaces between them. Once I realized that’s what was going on, I was able to look up the class for that particular icon and simply adjust the padding for it. In this case:

    .social-icon.icon-pinterest {
padding-right: 5px;
}

    Now I just hope I can remember I did that if ever want to add another icon at some point down the road heh
    Either way, appreciate your time, you did help in a roundabout way ??

    Thread Starter Nymphalis

    (@nymphalis)

    Menaka’s solution also worked – I changed it to -8px instead of -10px and I’m pretty sure it’s aligned now.
    And that will keep me from having to remember I changed the single icon!
    Thanks guys ??

    Would you mind marking this post as resolved?

    Thread Starter Nymphalis

    (@nymphalis)

    Sorry! New here, but done and done – thanks again!

    Thanks ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Alignment Issue’ is closed to new replies.