SharePoint Custom List - changing the photo and text size

Question

My SharePoint list view has three columns: Photo, Name, Role. How do I change the photo size in the view? How do I change the font size of Name and Role?

I tried the following code and the Role column content is moved into the Name column and Name content is not visible.

{   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json"   "additionalRowClass": "photo-row",   "rowFormatter": {     "elmType": "div",     "children": [       {         "elmType": "img",         "style": {           "width": "100px",              "height": "100px",             "border-radius": "50%",           "object-fit": "cover"         },         "attributes": {           "src": "[$Photo]",             "title": "Photo"             }       },       {         "elmType": "div",         "style": {           "display": "inline-block",           "vertical-align": "top",           "padding-left": "10px",           "font-size": "16px"           },         "txtContent": "[$Name]"         },       {         "elmType": "div",         "style": {           "display": "inline-block",           "vertical-align": "top",           "padding-left": "10px",           "font-size": "14px"           },         "txtContent": "[$Role]"         }     ]   } } 

Answer 1

Hi @

Here is test for your reference:

Here is list:

Here is code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalRowClass": "photo-row",
  "rowFormatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "width": "100px",
        "height": "100px",
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$Photo.serverRelativeUrl]",
              "title": "Photo"
            },
            "style": {
              "width": "100px",
              "height": "100px",
              "border-radius": "50%",
              "object-fit": "cover"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "padding-left": "80px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              
              "font-size": "16px"
            },
            "txtContent": "[$Name]"
          }
        ]
      },
      {
        "elmType": "div",
        "width": "100px",
        "height": "100px",
        "style": {
          "display": "inline-block",
          "vertical-align": "top",
          "padding-left": "100px"
        },
        "children": [
          {
            "elmType": "div",
           
            "style": {
              "font-size": "14px"
            },
            "txtContent": "[$Role.title]"
          }
        ]
      }
    ]
  }
}

Here is result:

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards

Cheng Feng