Avatar dimensions for landscape and portrait

[HHMediaDesign]

I have imported data from an old dating site with approx 270 members. The images are showing however there are some landscape and some portrait images. I’ve managed to hide overflow for the tall portrait avatars but then the landscape avatars are too short. I would like all avatars to fill the square without being stretched in either way.

This is how the avatars are being output straight out of the box (without any of my CSS changes).

Can I fix this with CSS?

Thank you!
Hillary

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, please give me a link to your website so i can check i out? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HHMediaDesign]

Thanks Laura – http://dating.thecoast.ca/

[Laura]

Hello, please add this to /wp-content/themes/sweetdate-child/assets/styles if the folders doesnt exist just create them.
Let me know if its working 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

Attachments:

You must be logged in to view attached files.

[HHMediaDesign]

Not sure if I did the right thing… I created a .css file called foundation-nonresponsive.min-.css using your css styles from when I clicked on the attachment in your reply (huge css file…?). Then uploaded that the the assets/styles folder of the theme.

No change… the thumbs are still as they were.

Any other suggestions?
Thanks!

[Laura]

Hello, well i actually dont know why is this happening to you, but well try this:
Goto foundation-nonresponsive.min-css and find img{height: auto;} then delete that, do it in the main theme sweetdate. If it works, save that file because if you update sweetdate it may be replaced.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HHMediaDesign]

Can you confirm what the file is called? You’ve mentioned 2 versions above (foundation-nonresponsive.min-.css and foundation-nonresponsive.min-css) and in the asset folder there is already a file called foundation-nonresponsive.min.css

Thank you!

foundation-nonresponsive.min-.css
foundation-nonresponsive.min.css
foundation-nonresponsive.min-css

[Laura]

Hello, the file is foundation-nonresponsive.min.css

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HHMediaDesign]

That didn’t work… 🙁

It just made the images stretch by height. I want them to just crop to a square and have the image fill the square…

Thoughts?

I’ve also done and update on the theme but no change.

[Laura]

Hello, do you have any quick css codes? Any change made recently to the CSS? Tried deactivating your plugins but buddypress to see if it fixes?
Let me know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HHMediaDesign]

Just deactivated all plugins except BB and nothing changed. I have only one CSS adjustment which I’d already removed to test.

[Laura]

Hello, can you give me access to your FTP so i can test some fixes?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HHMediaDesign]

This reply has been set as private.

[Laura]

Hello, please let me know if its fixed like you want it 🙂
If you want any special customization like bigger avatars and so, just let me know

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HHMediaDesign]

Thanks Laura but as I mentioned in a previous post, removing the height:auto; just stretches the image. Not so noticeable within the small thumbs but really bad on the individual profile. See attached.

It’s also stretched the logo which I don’t want. I can fix it though…

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, so now next step, please send me the info of your admin panel so i can log in and check it out 🙂
Sorry for so much steps, this issue is strange for me.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HHMediaDesign]

This reply has been set as private.

[Laura]

Hello, the problem is that users need to upload images same or higher than 580×580, so if its less it will look bad.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[HHMediaDesign]

Thank you – this is a new site with old data from a previous dating site so I can tell all new and returning users which dimensions to upload.

Much appreciated!
Hillary

[Author]

Posts