Home Forums ArileWP Pro Cropped and uncentered images in teams section

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #13176
    PoNG Center
    Participant

    Hello,

    The profile pictures on the teams section on the home page is being cropped at specific widths of the page. I would like for the images to maintain their full width at any length, and if it cannot fit all images, for it to display n-1 squares, until only 1 is displayed.

    Also at each point of display, I would like for the images to be centered, rather than right-aligned.

    Visual of the page here: https://imgur.com/a/QRYfPkP

    Thank you!

    • This topic was modified 4 years, 5 months ago by PoNG Center. Reason: Fixed link
    • This topic was modified 4 years, 5 months ago by PoNG Center.
    #13223
    themearile
    Keymaster

    Hi PoNG Center

    Thanks for contacting us. Don’t worry we are here to help you.

    Please share your site URL so we can take a look and provide you a good solution.

    Thanks

    #13276
    PoNG Center
    Participant

    Hello, the website is http://pong-center-dev.ucsd.edu/

    #13307
    themearile
    Keymaster

    Hi PoNG Center

    If you want to display the team image in full size on the mobile device then please use the best-recommended team image size of 700*870px.

    Let us know if it works.

    Thanks

    #13339
    PoNG Center
    Participant

    Hello,

    The issue doesn’t happen when it is on a mobile device, but in between PC and mobile device, like a tablet. Changing the dimensions of the photos did not help and still gave the same issue of right alignment and cropped image.

    #13407
    themearile
    Keymaster

    Hi PoNG Center

    Ok please add the below CSS code in the Additional CSS box.

    For this Go to Appearence >> Customize >> Additional css box.

    @media screen and (min-width: 768px) and (max-width: 992px) {
    	.team-mambers.vrsn-two .teammember-item .teammember-content {
    		width: 100% !important;
    	}
    	.team-mambers.vrsn-two .teammember-item .teammember-content .ourteam-image img {
    		width: 100%;
    	}
    }

    Let us know if it works.

    Thanks

    • This reply was modified 4 years, 4 months ago by themearile.
    #13620
    PoNG Center
    Participant

    I altered the code a little bit by increasing the max-width to 1200 and now the head shots 100% width! Thank you 🙂

    However, they are still right aligned as seen by the last picture in the visual of the page here: https://imgur.com/a/QRYfPkP

    I appreciate the continued help!

    #13774
    PoNG Center
    Participant

    Hello,

    I was wondering if there was an update to this inquiry!

    Thank you 🙂

    #13839
    themearile
    Keymaster

    Hi PoNG Center

    Ok, please add the below CSS code in the Additional CSS box.

    @media (max-width: 768px){
    .team-mambers.vrsn-two .teammember-item .teammember-content {
    float: none !important;
    margin: 0 auto !important;
    }
    }

    Let us know if it works.

    Thanks

    #13959
    PoNG Center
    Participant

    It works perfectly!

    Thank you so much for your help 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Cropped and uncentered images in teams section’ is closed to new replies.