• Resolved arjunbolangdy

    (@arjunbolangdy)


    I am trying to align images on our ‘Meet the Team’ page and even though the code reflects aligned images on top and at the bottom, a few of them are mislaligned.

    You can find the page here.

    You can see the misalignment on the row with ‘Julie Banerjee’ and ‘Arjun Bolangdy’ and also lower down with ‘Debjyoti Roy’ and ‘Tabrez Anwar’.

    Is there any reason this is happening?

    Can I add in a few lines of code to align these? HELP!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Johnna Armstrong

    (@johnna-armstrong)

    When I view your site with a browser inspector, I’m see this

    " "

    after this:

    <div style="clear:both;"></div>

    When I remove it, the two bios align at the top. I think if you can figure out where that non-breaking space is coming from, you’ll fix the problem.

    Thread Starter arjunbolangdy

    (@arjunbolangdy)

    Thank you so much!

    I actually ended up removing both and it works now.

    Although, I have one other question – what is the syntax to enter an empty line in WordPress?

    I have tried
    </br> but it doesn’t work. Any suggestions?

    Johnna Armstrong

    (@johnna-armstrong)

    I’m glad you got it working. Adding an empty line often behaves in a quirky way; you get more predictable behavior if you add margin, padding, divs (with or without clears), etc. If you wanted to add space space below two side-by-side bios, each of an unknown height, for example, you could add some height to the div clear below the two divs:

    <div style="clear: both; height: 10px;"></div>

    For your team bios, you might also consider using divs with table properties in your CSS. That may give you more control over the layout.

    Thread Starter arjunbolangdy

    (@arjunbolangdy)

    Johnna! You are amazing.

    Can I make you my WordPress mentor?

    Thank you so much for all your help.

    Johnna Armstrong

    (@johnna-armstrong)

    Ha ha, you are very welcome, and thank you!

    Thread Starter arjunbolangdy

    (@arjunbolangdy)

    Hello,

    I removed all of the extra spaces for the ‘Meet the Team’ page, but the last two still don’t seem to have the space in between them.

    You can find the page here.

    It looks like your two divs got swapped. The div with the class “last” is first. You probably just need to move the class “last” to the second div.

    Thread Starter arjunbolangdy

    (@arjunbolangdy)

    Well both those div statements seem to be the same – where did you notice the ‘last’ div statement? Can’t seem to get a grip on my code.

    When I view your team page with a browser inspector (right-click > Inspect using Chrome), I see the following top level div for Manita:

    <div class="team one-half last"></div>

    However, I don’t see the class “last” when I view the source code of the page. I’m not sure why that’s the case, so I’m guessing, but could it be that the class is being added via a shortcode in your page content?

    Thread Starter arjunbolangdy

    (@arjunbolangdy)

    I’m not sure. I have gone through all of the code and I see what you mean, except that the code doesn’t reflect this in any way. I have added a general div class to clear but never added the line you added above.

    I’m not even sure how to correct this, because as you said, it’s not even in the source code.

    Any final recommendations? I will try removing it from the Chrome code although I feel like this is a work around.

    If it were me and I couldn’t find the stray bit of code causing the problem, I’d delete the Australia content completely and add it again. Maybe as you were adding and modifying code, some stray bit got left behind and is creating the issue. Hopefully, adding everything back clean will fix it.

    Thread Starter arjunbolangdy

    (@arjunbolangdy)

    Tried this and it didn’t work.

    ??

    What a hassle… Did you already try creating that section by itself on a new page? Not copying the code, but adding the two team members fresh using shortcodes or whatever method the theme uses?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Image Alignment (Top and Bottom)’ is closed to new replies.