Make trustbadges container the same width like the others - Dawn Theme

Store Design
,

Topic summary

A user encountered an issue where a trust badges container displayed at the correct width on desktop but appeared narrower than other components on mobile.

Solutions Provided:

Multiple community members offered CSS fixes targeting mobile viewports:

  • Solution 1 (Accepted): Add custom CSS to theme.liquid before the </head> tag using a media query for screens under 750px width
  • Solution 2: Modify section-main-product file in the assets folder, adding CSS targeting the specific Shopify trust badges block ID with max-width: 100% !important
  • Solution 3: Use a media query for screens under 768px, adjusting width to 100%, adding padding, and ensuring box-sizing: border-box

Outcome:

The original poster confirmed the first solution worked successfully and marked it as accepted. The issue was resolved by applying mobile-specific CSS to force the trust badges container to match the full width of other page elements.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi

I have the right size on desktop but mobile isnt wide like the other components, could we make this section wider on mobile?

www.dekanten.no

See attached image:

trustbadge.png
trustbadge.png439×495 18.9 KB

2

Hi @Dekanten ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

topnewyork_0-1725534289841.png
topnewyork_0-1725534289841.png314×574 92.9 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

1 Like
3

Hi and thank you so much really glad that the results works like a charm here. :slightly_smiling_face:

Big huge thanks :slightly_smiling_face:

4

@Dekanten , glad it worked. Your most welcome!

5

Hello @Dekanten
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-main-product
add this code at the end of the file.

@media only screen and (max-width: 749px) {
#shopify-block-essential_trust_badges_app_block_dw87kL {
max-width: 100% !important;
}
}

result

16.png
16.png408×832 28.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

To make the section wider on mobile, you’ll need to adjust the CSS for that specific section. You can do this by targeting the mobile screen sizes using media queries. Here’s an example:

@media only screen and (max-width: 768px) {
.your-section-class {
width: 100%; /* Adjust this percentage based on your layout needs /
padding: 0 15px; / Add padding to prevent it from touching the edges /
box-sizing: border-box; / Ensures padding doesn’t affect the width */
}
}

1 Like