Images Not Aligning Correctly on Landing Page

SOLVE
Occasional Contributor

We have a landing page that lists providers with associated logos next to the provider names. The first two images are not aligned with the names the way the rest are aligned. 

 

I've checked CSS declarations to see if there are any glaring issues there, but everything matches. 

 

What else can I be checking to determine why 2 out of ~60 images wouldn't be properly aligned? 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Esteemed Advisor

@Claudia_Lab, Its a height thing, none of your images are actually lined up except that their height is about equal to the height of the container for the row. 

 

To truly verically align your images you can use flexbox or positioning. I would use flexbox.

.image-container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
   
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
}

You don't have any unique classes for me to use here. You can add a class to the container then use that to target the containers to your images, or/and give the image modules a class like '.table_images' so you have something to work with. 

 

Need help? Hire Us Here

- Jonathan Sumner
Reply
0 Upvotes
4 Replies 4
Esteemed Advisor

@Claudia_Lab,

 

I am pretty good at finding these types of issues but I can't do much without seeing the page.

 

If you can share a shareable link to the page I can can check it out for you.

 

Need help? Hire Us Here

- Jonathan Sumner
Reply
0 Upvotes
Highlighted
Occasional Contributor
Reply
0 Upvotes
Esteemed Advisor

@Claudia_Lab, Its a height thing, none of your images are actually lined up except that their height is about equal to the height of the container for the row. 

 

To truly verically align your images you can use flexbox or positioning. I would use flexbox.

.image-container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
   
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
}

You don't have any unique classes for me to use here. You can add a class to the container then use that to target the containers to your images, or/and give the image modules a class like '.table_images' so you have something to work with. 

 

Need help? Hire Us Here

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor

Ahhh, I see! Thank you very much!

Reply
0 Upvotes