Suits Theme – Conflicting CSS image alignment issue

  • Unknown's avatar
    bobbyhearn · Member ·

    I’m no coding expert by any means, so I need some help on this. The issues I’m having are occurring on 1. My contact page and 2. The “Ranking System” text widget in my main sidebar. There’s conflict there.

    Here’s the deal: On the “contact” page, I have three social media buttons at the bottom. Right now they are in a vertical line and aligned to the left. I want them to be centered all on one line below the text that says “Or hit us up on social media.” Second, I also want the bottle caps in the “Ranking System” sidebar to stay centered over the text. Currently, they are. However, I can’t seem to get both of these desires to happen simultaneously. I’ll put in CSS to fix one alignment issue, and it screws up the alignment of the other.

    I was advised the real CSS wizards are here. This is one of my last little bugs on my simple site. Please, use your magic on my site!

    The blog I need help with is: (visible only to logged in users)

  • staff-happychia · Staff ·

    First of all you need to fix up the html you added to the “contact” page.

    Besides what you need, all the three icons are pointing to your Facebook profile. This is because the html is messed up.

    1) Remove the current html you have that’s starting with
    <p style="text-align:center;">... until the end </p> tag.

    2) Add the html from https://cloudup.com/c8NI94pgmNA

    3) Add the following CSS in the CSS Editor.

    .social p {
    text-align:center;
}

.social a {
    display:inline-block;
    margin: 20px;
}

    Your second problem resolves itself automagically.

    Please let me know if this is the magic you are after :-)

  • staff-happychia · Staff ·

    Please correct the Instagram link in the html in step 2).

    Twitter and Facebook links should be fine but please double check.

  • Unknown's avatar
    bobbyhearn · Member ·

    chaitanyamsv – That didn’t seem to solve my issue. Maybe I didn’t explain part of what I wanted very well. On the contact page, I want those three bottle cap icons to all sit next to each other in a horizontal line. Right now they are set up vertically. Check the html on the contact page and CSS and let me know if I did something wrong. Very possible. I appreciate your help, so stick with me here and give me an update when possible!

  • staff-happychia · Staff ·

    The html in https://cloudup.com/c8NI94pgmNA isn’t copied as is :-)

    The blog has three <p> tags containing each as opposed to one <p> containing all the three tags.

    Please remove additional <p> tags and it should be alright.

  • staff-happychia · Staff ·

    Please also make sure there are no line breaks (
    ) tags in the resulting html.

    Add the html under Text tab. Remove the spaces between tags.

    Sorry, I did not realize this until you let me know. And the additional <p> tags were added by the Editor, not you. So sorry again.

  • staff-happychia · Staff ·

    I created another html file with no spaces and no line breaks here: https://cloudup.com/cUOXErmMuV4

    The idea is to not let the WordPress.com Post Editor insert any paragraph tags or line breaks so the CSS works as expected.

    Please try and let me know how it goes :-)

  • Unknown's avatar
    bobbyhearn · Member ·

    chaitanyamsv – You are THE MAN! Thanks!!!!!!!

  • staff-happychia · Staff ·

    Hip hip hooray!

    Very glad, it worked for you. Cheers.

  • The topic ‘Suits Theme – Conflicting CSS image alignment issue’ is closed to new replies.