diff --git a/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/Content.ets b/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/Content.ets
index 4060b53af..c57fd7c1c 100644
--- a/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/Content.ets
+++ b/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/Content.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2022-2024 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -22,7 +22,7 @@ export default struct Content {
 
   build() {
     GridRow() {
-      GridCol({ span: { sm: 12, md: 6, lg: 4 } }) {
+      GridCol({ span: { xs:12, sm: 12, md: 6, lg: 4 } }) {
         PlayListCover()
           .onAreaChange((oldArea: Area, newArea: Area) => {
             this.coverHeight = newArea.height as number
@@ -30,7 +30,7 @@ export default struct Content {
       }
       .backgroundColor('#e4ecf7')
 
-      GridCol({ span: { sm: 12, md: 6, lg: 8 } }) {
+      GridCol({ span: { xs:12, sm: 12, md: 6, lg: 8 } }) {
         PlayList()
       }
       .borderRadius(40)
diff --git a/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/PlayListCover.ets b/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/PlayListCover.ets
index 722624362..d87372c95 100644
--- a/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/PlayListCover.ets
+++ b/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/entry/src/main/ets/common/PlayListCover.ets
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2022-2024 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -100,15 +100,15 @@ export default struct PlayListCover {
     if (this.currentBreakpoint === 'sm') {
       Column() {
         GridRow() {
-          GridCol({ span: { sm: 4, md: 10 }, offset: { sm: 0, md: 1, lg: 1 } }) {
+          GridCol({ span: { xs: 4, sm: 4, md: 10 }, offset: { xs: 0, sm: 0, md: 1, lg: 1 } }) {
             this.CoverImage()
           }
 
-          GridCol({ span: { sm: 8, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
+          GridCol({ span: { xs: 8, sm: 8, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
             this.CoverIntroduction()
           }
 
-          GridCol({ span: { sm: 12, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
+          GridCol({ span: { xs: 12, sm: 12, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
             this.CoverOptions()
           }
         }
@@ -118,15 +118,15 @@ export default struct PlayListCover {
     } else {
       Column() {
         GridRow() {
-          GridCol({ span: { sm: 4, md: 10 }, offset: { sm: 0, md: 1, lg: 1 } }) {
+          GridCol({ span: { xs: 4, sm: 4, md: 10 }, offset: { xs: 0, sm: 0, md: 1, lg: 1 } }) {
             this.CoverImage()
           }
 
-          GridCol({ span: { sm: 8, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
+          GridCol({ span: { xs: 8, sm: 8, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
             this.CoverIntroduction()
           }
 
-          GridCol({ span: { sm: 12, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
+          GridCol({ span: { xs: 12, sm: 12, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
             this.CoverOptions()
           }.margin({
             top: this.currentBreakpoint === 'sm' ? 15 : 0,
diff --git a/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/hvigor/hvigor-config.json5 b/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/hvigor/hvigor-config.json5
index 835122515..67668b5c1 100644
--- a/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/hvigor/hvigor-config.json5
+++ b/code/SuperFeature/MultiDeviceAppDev/MusicAlbum/hvigor/hvigor-config.json5
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Copyright (c) 2023-2024 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -14,8 +14,8 @@
  */
 
 {
-  "hvigorVersion": "2.0.0",
+  "hvigorVersion": "2.4.2",
   "dependencies": {
-    "@ohos/hvigor-ohos-plugin": "2.0.0"
+    "@ohos/hvigor-ohos-plugin": "2.4.2"
   }
-}
+}
\ No newline at end of file