A user is experiencing a broken image icon appearing on the left side of their custom HTML block, despite the main image displaying correctly. They’ve shared their image source code and want the icons to expand full-screen and center on the page.
Proposed Solutions:
theme.css targeting .page-width classes with max-width: 100% and specific margin/padding adjustmentsCurrent Status:
The CSS solution partially worked but created unintended side effects—it shifted other images to the left and increased button location sizes. The issue remains unresolved as the user seeks a fix that doesn’t affect other page elements. Multiple participants have requested the store URL to provide more targeted assistance.
Hi there,
i have applied a custom html block to my website and added the img source code and it works, however i notice that there is this little broken image icon showing at the left hand side.
source code
also i want the icons to expand and cover full screen but it seems to stick to the centre of the page only. hope it make sense what i am trying to achieve.
i want the end result to look like this (i did this through figma)
pls help
put below custom code :
it will be look like this
can you please share store url
Hello @SaadLaghari
Please share your store URL.
i tried this code but didnt make any difference 
@SaadLaghari
put below css into theme.css
.page-width, .page-width--wide {
max-width: 100% !important;
margin: 0 auto;
padding: 0 20px;
}
i tried this, it worked on this image but it also moved other images to left side and also location button size increased as well.
