CMS Development

Claudia_Lab
Teilnehmer/-in

Images Not Aligning Correctly on Landing Page

lösung

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? 

0 Upvotes
1 Akzeptierte Lösung
Jsum
Lösung
Autorität

Images Not Aligning Correctly on Landing Page

lösung

@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

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
4 Antworten
Jsum
Autorität

Images Not Aligning Correctly on Landing Page

lösung

@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

0 Upvotes
Claudia_Lab
Teilnehmer/-in

Images Not Aligning Correctly on Landing Page

lösung
0 Upvotes
Jsum
Lösung
Autorität

Images Not Aligning Correctly on Landing Page

lösung

@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

0 Upvotes
Claudia_Lab
Teilnehmer/-in

Images Not Aligning Correctly on Landing Page

lösung

Ahhh, I see! Thank you very much!

0 Upvotes