Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 20, 2018 at 7:45 am #944473
    scottgroves73

    Hi Team,
    Team Member Element looks fine on desktop – even when you drag browser into mobile width.

    But when you look at it on an actual mobile device, the image is stretched wide and out of proportion.

    Added CSS to keep all boxes same size and object-fit (see below) – but no joy on mobile.
    team-img-container img {
    display: block;
    /* image-rendering: auto; */
    margin: 0 auto;
    width: 100%;
    max-height: 250px;
    min-height: 250px;
    object-fit: cover;
    }

    Please help with suggestions (link in private – please check on your phone)

    April 20, 2018 at 9:03 pm #944755
    Jordan Shannon

    Hey scottgroves73,

    Shouldn’t “team-img-container” be labled as a class or id?

    For example .team-img-container or #team-img-container

    Best regards,
    Jordan Shannon

    April 20, 2018 at 11:50 pm #944785
    scottgroves73

    Hey Jordan,
    Yeah it’s a class. Sorry I just left the dot off in my message to support.

    CSS is working fine. It’s just not rendering on mobile properly.

    April 23, 2018 at 6:32 pm #945475
    Jordan Shannon

    Hi,

    Thanks for clarifying. Try adding this to quick css:

    @media only screen and (max-width: 767px) {
    .team-img-container img {
    display: block!important;
    /* image-rendering: auto; */
    margin: 0 auto!important;
    width: 100%!important;
    max-height: 250px!important;
    min-height: 250px!important;
    object-fit: cover!important;
    }}

    Best regards,
    Jordan Shannon

    April 24, 2018 at 4:31 am #945657
    scottgroves73

    Hey Jordan,
    Thanks for this. I got it working on phone and desktop (but not with code above as display:block won’t center items with width:100%)

    I got it centering on desktop and phone – but it’s not centering on iPad. Have tried several media queries but they tend to override the working CSS and then each Team Member image size is different and not aligned in height. Ughh!!!

    Drag your browser in to about 900px wide and you’ll see what I mean.

    I also want to restrict the use of !important – overruse can cause so many problems. Would rather make sure code is clean and optimal. Any chance Team Member element being worked on as CSS Grid element for future theme updates?

    The element that contains the pic seems to have a -95 margin on right when viewed at 950px wide landscape

    Thanks for your help.
    Scott

    April 25, 2018 at 9:23 am #946448
    Vinay

    Hi,

    I’m unable to view the page and inspect the element in question.

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    You can also refer to the team member section for customization tips.

    Best regards,
    Vinay

    April 26, 2018 at 1:46 am #946983
    scottgroves73

    Thanks Vinay – I have fixed it for now.

    The problem is a margin on the right of -95px that was causing the images to look off center when the browser shrinks to smaller screen sizes. Although technically, it’s still centered, they were being cut off on right hand side making it look like it was off center.

    Highly recommend, Kriesi consider updating theme elements to CSS Grid builds, rather than flex box style css.

    With so many device sizes now, hard to manage.

    Thanks for all the help Team.

    April 26, 2018 at 9:15 am #947131
    Vinay

    Hi,

    I still see the same login screen. Please review the link and let us know when we can inspect the element.

    You need to logout of admin and be able to view the link or share the admin login details in private content area.

    Best regards,
    Vinay

    April 27, 2018 at 4:22 am #947583
    scottgroves73

    Thanks Vinay – close thread for now. I have fixed it.

    April 27, 2018 at 11:47 am #947881
    Vinay

    Hi,

    Glad you found a workaround, I’m sorry we couldn’t be of much help, but I hope you understand that we can only help better if we are able to inspect the element in question.
    Please feel free to get in touch with us again if you have any issues.

    Best regards,
    Vinay

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Team Member Element Warping Image on Mobile’ is closed to new replies.