Centering text in simple list for Mobile

Site URL: https://www.adeptbenefits.com

Hi! I have been having the hardest time centering the title and description of the simple list block of my Meet the Team page for a client I've been designing a site for. Here's the code I have, I know it's not perfect but it's working for the most part:

//mobile version - meet the team//
@media only screen and (max-width: 767px) { 
section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__title {
  font-weight: normal!important;
  font-size: 16pt !important;
  font-weight:700!important;
  font-size: 1rem;
  margin-right: 195px;
  padding-bottom: 0px;
  padding-top: 30px;
}
  .user-items-list-item-container .list-item-content__description {
  font-size:10pt!important;
  text-align: center!important;
      margin-right: 300px;
}
.user-items-list-simple .list-item-content {
  width: 300%;
  height: 2vh;
}
  .user-items-list-simple img{
    max-width: 900px!important;
    margin: 0 auto!important;
  }
}

Help me center the descriptions, especially???

(Password is Employee180!)

6 hours ago, dv_louise_designs said:

Site URL: https://www.adeptbenefits.com

Hi! I have been having the hardest time centering the title and description of the simple list block of my Meet the Team page for a client I've been designing a site for. Here's the code I have, I know it's not perfect but it's working for the most part:

 

//mobile version - meet the team//
@media only screen and (max-width: 767px) { 
section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__title {
  font-weight: normal!important;
  font-size: 16pt !important;
  font-weight:700!important;
  font-size: 1rem;
  margin-right: 195px;
  padding-bottom: 0px;
  padding-top: 30px;
}
  .user-items-list-item-container .list-item-content__description {
  font-size:10pt!important;
  text-align: center!important;
      margin-right: 300px;
}
.user-items-list-simple .list-item-content {
  width: 300%;
  height: 2vh;
}
  .user-items-list-simple img{
    max-width: 900px!important;
    margin: 0 auto!important;
  }
}

Help me center the descriptions, especially???

 

(Password is Employee180!)

 

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px){
  section[data-section-id="6215672720d4727b3982a809"] .user-items-list-simple .list-item-content  {
    height: auto ;
    width: 100%;
  }
  section[data-section-id="6215672720d4727b3982a809"] {
    padding: 0;
  }
  section[data-section-id="6215672720d4727b3982a809"] .list-item-content__description p {
    text-align: center !important;
  }
}

Let me know how it works on your site

My testing

15 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px){
  section[data-section-id="6215672720d4727b3982a809"] .user-items-list-simple .list-item-content  {
    height: auto ;
    width: 100%;
  }
  section[data-section-id="6215672720d4727b3982a809"] {
    padding: 0;
  }
  section[data-section-id="6215672720d4727b3982a809"] .list-item-content__description p {
    text-align: center !important;
  }
}

Let me know how it works on your site

@bangank36It worked really well! Thank you! Can you also help me with changing the font-size of the section title, and reducing space between list items?

5 hours ago, dv_louise_designs said:

@bangank36It worked really well! Thank you! Can you also help me with changing the font-size of the section title, and reducing space between list items?

Hi,

Use this code in Design -> Custom CSS

section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__title {
    font-size: 22px !important;
}

section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__description {
    font-size: 14px !important;
}

.user-items-list-item-container[data-section-id="6215672720d4727b3982a809"] {grid-gap: 50px 20px !important;}

Please use the like button if it helps you!

Best,
Leopold

Hi @IXStudio! That was very helpful. Was wondering if you could help with another part of that site - everything was good until recently and the list got all jumbled in mobile again. Any help would be great! 

I also can't seem to edit either "The Problem" or "The Solution" text to change size. Thanks!

On 3/18/2022 at 12:18 PM, dv_louise_designs said:

Hi @IXStudio! That was very helpful. Was wondering if you could help with another part of that site - everything was good until recently and the list got all jumbled in mobile again. Any help would be great! 

I also can't seem to edit either "The Problem" or "The Solution" text to change size. Thanks!

 

 

Which page are you referring to?

On 3/18/2022 at 4:18 AM, dv_louise_designs said:

Hi @IXStudio! That was very helpful. Was wondering if you could help with another part of that site - everything was good until recently and the list got all jumbled in mobile again. Any help would be great! 

I also can't seem to edit either "The Problem" or "The Solution" text to change size. Thanks!

 

 

You are welcome!
Please let me know which page are there?

Please use the like button if it helps you!

Best,
Leopold