The responsive of the tablet device doesn't look good

Site URL: https://www.bauyu.com/art-people-intro

The attachments are desktop view and tablet view. 

As you can see the text and buttons are displayed well on the desktop. But when on tablet view, they look very long and narrow. 

Here is the code I used, is it related to the code I used?

#block-   {
   border-bottom: 8px groove #F0D1BF;
  padding: 0px ; margin-left: 15px; margin-right: 15px
}

#block-  {
  background: #FAF8F3 ; margin-left: 15px; margin-right: 15px
}

#block-  {
  background: #FAF8F3 ; margin-left: 15px; margin-right: 15px
}

Hi,

How about changing to 2 items/row on tablet only?

On 3/19/2022 at 4:31 PM, tuanphan said:

Hi,

How about changing to 2 items/row on tablet only?

I think it is possible to try, could you provide some code? Thank you!

Add to Design > Custom CSS

/* Tablet Art people */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-6204857e20bdac7a9d26d54e {
.row:nth-child(2)>.col:nth-child(-n+2) {
    width: 50%;
}
.span-4 .span-2:last-child {
    width: 100%;
}
.span-4 .span-2:first-child {
    display: none;
}
.span-6 {
    width: 100%;
}
.span-6 .span-2:nth-child(-n+2) {
    width: 50%;
    margin-top: 20px;
}}
div#page-6204a6624613c972486f2c5f {
.row>.col:nth-child(-n+2) {
    width: 50%;
}
.row>.col:nth-child(-n+2) .span-2:first-child {
    display: none;
}
.row>.col:nth-child(-n+2) .span-2:last-child {
    width: 100%;
}
.span-6 {
    width: 100%;
}}
}

2 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Tablet Art people */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-6204857e20bdac7a9d26d54e {
.row:nth-child(2)>.col:nth-child(-n+2) {
    width: 50%;
}
.span-4 .span-2:last-child {
    width: 100%;
}
.span-4 .span-2:first-child {
    display: none;
}
.span-6 {
    width: 100%;
}
.span-6 .span-2:nth-child(-n+2) {
    width: 50%;
    margin-top: 20px;
}}
div#page-6204a6624613c972486f2c5f {
.row>.col:nth-child(-n+2) {
    width: 50%;
}
.row>.col:nth-child(-n+2) .span-2:first-child {
    display: none;
}
.row>.col:nth-child(-n+2) .span-2:last-child {
    width: 100%;
}
.span-6 {
    width: 100%;
}}
}

 

Thank you!! It works!!