is any buddy help me in this code for using css

Store Design
, , , , , , , ,

Topic summary

A user posted CSS code for implementing a trust badge (created by IMCWire) on their Shopify store. The code includes styling for a logo container displaying news outlet logos (Yahoo News, MarketWatch, Bloomberg) with responsive design elements.

Key CSS Features:

  • Flexbox-based vertical centering for logo alignment
  • Responsive breakpoints at 584px/585px for mobile optimization
  • Decorative title borders using pseudo-elements (::before and ::after)
  • Logo sizing constraints (max-width: 100px, max-height: 66px)

Notable Issue:
The HTML markup appears corrupted or reversed in places (text appears backwards), suggesting potential encoding or copy-paste errors.

Response:
Another user (EcomGraduates) suggested placing the code in Shopify’s “custom liquid and html section,” though their specific code recommendation wasn’t fully visible in the thread.

Status: The discussion remains open with minimal troubleshooting provided for the apparent code formatting issues.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1
.imcwire-logo-container-item { height: auto; width: 100%; position: relative; padding: 10px 10px; }

.imcwire-vertical-center {
height: inherit;
display: flex;
align-content: center;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
}

.imcwire-vertical-center img.imcwire-news-logo {
max-width: 100px;
max-height: 66px;
min-width: 50px;
min-height: 14px;
height: auto;
width: auto;
margin: 7px 10px;
overflow: visible;
}

.imcwire-trust-badge,
.imcwire-title,
.imcwire-footer {
font-family: sans-serif !important;
}

.imcwire-title:before,
.imcwire-title:after {
content: “”;
flex: 1 1;
border-bottom: 1px solid #d8d8d8;
margin: auto;
width: 27%;
display: block;
position: relative;
}

.imcwire-title:before {
margin-left: 30px;
top: 12px;
}

.imcwire-title:after {
margin-right: 30px;
top: -13px;
}

@media screen and (min-width: 585px) {
.imcwire-logo-container {
padding: 0 20px;
}
}

@media screen and (max-width: 584px) {
.imcwire-news-logo {
max-width: 70px !important;
}

.imcwire-title {
font-size: 15px;
top: -5px;
letter-spacing: 6px;
}

.imcwire-title:before,
.imcwire-title:after {
border-bottom: none !important;
}

.imcwire-leaf {
display: none !important;
}
}

@media screen and (max-width: 340px) {
.imcwire-title-hr {
display: none !important;
}

.imcwire-title {
font-size: 14px;
padding: 0 !important;
}

.imcwire-footer {
font-size: 11px !important;
margin: 20px 0 25px 0 !important;
letter-spacing: 2px !important;
}

.imcwire-news-logo {
max-width: 50px !important;
}
}

.imcwire-logo-container {
text-align: center;
margin: 0 auto 0 auto;
display: flex;
align-content: center;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}

.imcwire-newslogos {
display: inline-block;
position: relative;
}

AS SEEN ON
2

try this in the custom liquid and html section


  

    

> 

  

  
    

> 

  

  
    

>