Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #936258

    Hi,

    So I added the below Quick CSS to make them look like circles as well as be greyscale and it works perfectly on Desktop or Laptops but on tablets, mobile, or small screens the circle turns into a square with rounded corners.

    How can i make it look like a circle regardless of screen size?

    }
    .team-img-container {
    border-radius: 175px;
    }
    .team-img-container img {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    -moz-filter: grayscale(100%) !important;
    -o-filter: grayscale(100%) !important;
    filter: grayscale(100%) !important;
    }

    #936319

    Hey immergellc,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    #936322
    This reply has been marked as private.
    #936393

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 990px) {
    .team-img-container {
        border-radius: 100% !important;
        height: 250px;
    }
    }

    Best regards,
    Rikard

    #936785

    closer but not working yet. It now shows a an oval on landscape and more of an oval in portrait on a phone.

    I just want it to say as a perfect circle regardless of screen size.

    Thoughts?

    • This reply was modified 7 years, 3 months ago by immergellc.
    #937115

    Hi immergellc,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .team-img-container .avia_image.avia_image_team {
        border-radius: 165px;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.