The new Horizon theme has a bug where app blocks added to the Header are not able to expand to the full width, even if the block settings are set to Full width. This was tested on the latest Horizon 1.0.1.
Here are some steps to reproduce this:
Add an app block that expands to full width to the Header:
You’re setting the “Section” around the block to be full-width which is working correctly, but that doesn’t directly affect the app block within the section.
The block within the section also needs to have a setting that sets width: 100%; in order to fill up the section, which is why your custom CSS works.
Hi @mxstbr - Thanks for your reply and for making that helpful graphic.
However, my app block is already set to expand to full width, but it is not able to due to the containing “shopify-block” DIV not expanding to full width.
Here is the generated HTML for my app block within the section:
<div id="shopify-block-AT3BUMHFJRW5KT2o0a__flair_product_badges_labels_banners_7CcfAE" class="shopify-block shopify-app-block" data-block-handle="banners">
<!-- BEGIN app snippet: banners_gen3 -->
<flair-banners product-id="" auto-layout="Default"></flair-banners>
<!-- END app snippet -->
</div>
The flair-banners element is set to expand to the full width, but the “shopify-block shopify-app-block” DIV will not expand as you can see here:
I may be mistaken, but I don’t believe my app block is able to force the containing DIV to be full width. Here is a theme preview link in case you need it.
@mxstbr I can confirm that this issue is also occurring across all our apps with multiple merchant reports. We’ve implemented a similar workaround for now:
div[id*="app_name_app_block"] {
width: 100%;
}
The same seems to happen with a custom liquid section in Horizon: