[Resolved] Help me to fix layout

[Growthonics]

Hi, I’m using Broadcast template.

I’m creating custom home page and i want this type of layout for that: https://i.postimg.cc/ZR2Wf27k/Screenshot-20221124-051529.png

I tried using Generateblocks but i’m getting this type of design: https://i.postimg.cc/ZRtkVL87/Screenshot-20221124-051607.png

How can i achieve the design i want. please help!
Thanks

[David]

Hi there,

use the GenerateBlocks Query Loop block, it provides full styling controls.
To save you some time i created one, just copy the code below and paste it into the block editor:

<!-- wp:generateblocks/query-loop {"uniqueId":"f3d4f9f3","query":{"post_type":"post","per_page":"5"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"a65f5070","columns":1,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true}} -->
<!-- wp:generateblocks/container {"uniqueId":"dface3c7","isGrid":true,"isQueryLoopItem":true,"gridId":"a65f5070","width":100,"isDynamic":true,"blockVersion":2,"lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/grid {"uniqueId":"9431d226","columns":2,"verticalGap":20,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"72b116f4","isGrid":true,"gridId":"9431d226","width":50,"widthMobile":100,"flexBasis":"100","flexBasisMobile":"100","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/image {"uniqueId":"511c2cea","sizeSlug":"thumbnail","width":"100px","height":"100px","useDynamicData":true,"dynamicContentType":"featured-image"} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"bceee85e","isGrid":true,"gridId":"9431d226","width":50,"flexGrow":1,"flexBasisMobile":"auto","paddingLeft":"20","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"6892c913","backgroundColor":"","fontSize":20,"useDynamicData":true,"dynamicContentType":"post-title"} -->
<h2 class="gb-headline gb-headline-6892c913 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->

[Growthonics]

Your code is commented, should i still copy paste?

[David]

Yes… those Comments are what WordPress uses in the editor for the Blocks HTML.
Just paste it into an empty Text block

[Growthonics]

Thanks David for your help. but this is not the layout i want.

It’s showing completely wrong in mobile devices: https://i.postimg.cc/yNX2NkpQ/Screenshot-20221124-064308.png

I want like this in mobile devices: https://i.postimg.cc/ZR2Wf27k/Screenshot-20221124-051529.png

[David]

I edited the code above so it keeps the layout on mobile.

Each block in the query loop has its own style controls, select a block and check the sidebar settings where you can make Typography, Color, Spacing adjustments.

[Growthonics]

Thank you, David!

[David]

You’re welcome

[Author]

Posts