How to Modify the Avatar in Bio Pages

You know that bio pages by default present or displays the avatar image as a circle, like so;

We some CSS teawking (just a few lines) in your Custom CSS box, in the settings tab, we can play with the avatar image and make it: bigger, smaller or squared instead of a circle. Let’s look at the code:

To make it bigger

If you change those values to make it bigger just increase width and height values, try to always set them to the same value. To make it smaller decrease the values.

 #profile > div.row > div > img {
    /*to change the avatar width and height*/
    width: 220px;
    height: 220px;
}

Result: bigger avatar

To make it square

In this example we’re keeping the bigger avatar image but eliminating the rounded image attribute by setting the border radius to 0%. If we put it all together it looks like this:

 #profile > div.row > div > img {
    /*to change the avatar width and height*/
    width: 220px;
    height: 220px;

   /*to set it as a square image*/
    border-radius: 0%!important;
}

The result

Final touches

Now, for the final touch, let’s put back some corner to that square image. Putting all the code together again, it should look like this:

#profile > div.row > div > img {
   /*to set it as a square image*/
    border-radius: 0%!important;

    /*to change the avatar width and height*/
    width: 220px;
    height: 220px;

   /* to add corners to the image */
   border-radius: 8px !important;
}

The final result

Please note that the preview window in the bio page editor will not show all these modifications. You can only see the modifications once you hit the update button.