How can I center align three icons with text in a custom section?

[vivame]

Hi, can anyone help me with this custom section:

At the moment it is four icons with text, I would like to make it three icons with text, however when I remove one of the icons + text from the section, it leaves a space and the remaining three icons are not aligned in the centre of the section. They just shift to the left…

How can I edit the styles.css to have three evenly spaced icons with text, aligned to the centre? I am using Turbo theme

Any help appreciated!

Here is the code for the styles of the section (currently with four icons+text):

.trust_inner{
background-color: #F8F8F8;
padding: 20px 30px;
margin: 0 auto;
}

.trust_wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

#trust .trust_item{
padding: 0;
flex-basis: 100%;
text-align: center;
margin: 20px 0;
}

#trust h4{
font-size: 16px;
color: #262626;
line-height: 1.4;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
padding: 0;
margin: 0;
}

#trust svg {
width: 50px;
height: 45px;
display: block;
margin: 0 auto 20px auto;
}

@media only screen and (min-width: 480px){
#trust .trust_item{
flex-basis: 50%;
}
}

@media only screen and (min-width: 749px){
#trust .trust_item{
flex-basis: 25%;
margin: 50px 0;
}
}

[ZestardTech]

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[vivame]

Hi, I have sent it to you

[DigiXoft]

Hi

Please add

#trust .trust_item{

flex:1;

}

If not work then send me your store link.

[vivame]

Hi, where do I add that in the style that I currently have please?

[DigiXoft]

I think you have posted css in your question, just place it within section.

[vivame]

That worked to space them out evenly but now they do not stack properly on mobile:

[DigiXoft]

Need your site link and password if password protected.

[DigiXoft]

Add @media only screen and (max-width:786px){ #trust .trust_item flex-basis : initial ; } }

[vivame]

I am not experienced with code, I do not know where to add this in the original code I posted on here as I did not write the code, so I would need to know where to inject the code

[vivame]

I tried that and it did not work:

[Kinjaldavra]

@media only screen and (max-width: 480px){
    #trust .trust_item{
      flex-basis: 100%;
    }
  }
  
@media only screen and (min-width: 749px){
  #trust .trust_item{
      flex-basis: 33.33%;
      margin: 50px 0;
  }
}

[vivame]

Perfect, exactly what I needed thank you