Need Help In Getting Blogs Lined Up & Styled On Home page

[FairTrade4]

I am hoping somebody can help me with this issue. I am working on a custom theme and the client is wanting the Recipe Blogs to show up automatically on the Home page when new recipes are added. I have it on a Home page section, so 3 show up, but am having trouble getting them lined up and to bring ion the styling.

This how they currently look on the live site, recipe blog page: https://belcampo.com/blogs/recipe
And this is how it currently looks on the Home page, Recipes & How Tos section, you will see the 3 article images and titles lined up vertically: https://4cffgtp6f1qstgsz-43102240923.shopifypreview.com

I have also included a screenshot in case the link does now work.

This is the code that I borrowed from another Shopify forum:

<h1 class="display-1 title">{{ section.settings.page_title }}</h1>

{%- assign blog = blogs[section.settings.blog] -%}

{%- if blog.articles_count > 0 -%}
<ul>

{%- for article in blog.articles limit: section.settings.post_limit -%}
<li>
<a href="{{ article.url }}">
{%- if article.image -%}
{{ article | img_url: '150x150', scale: 2 | img_tag: '' }}
{%- endif -%}
<h2>{{ article.title }}</h2>
</a>

{%- if section.settings.blog_show_author -%}
<span>
By {{ article.author }}
</span>
{%- endif -%}

{%- if section.settings.blog_show_date -%}
<span>
{{ article.published_at | time_tag: format: 'month_day_year' }}
</span>
{%- endif -%}

<ul>
<li>
<a href="{{ article.url }}" aria-label="Read more: {{ article.title }}">

</a>
</li>

{%- if blog.comments_enabled? and article.comments_count > 0 -%}
<li>
<a href="{{ article.url }}#comments">
{{ article.comments_count }} comments
</a>
</li>
{%- endif -%}

</ul>
</li>
{%- endfor -%}

</ul>
{%- endif -%}

{%- if section.settings.show_view_all -%}
<a href="{{ blog.url }}"
class="btn"
aria-label="{{ 'blogs.article.view_all_blogs' }}">
{{ 'blogs.article.view_all' }}
</a>
{%- endif -%}

</section>

{% schema %}
{
"name": "Blog posts",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Blog posts"
},
{
"id": "blog",
"type": "blog",
"label": "Blog"
},
{
"type": "range",
"id": "post_limit",
"label": "Posts",
"min": 3,
"max": 12,
"step": 3,
"default": 3
},
{
"type": "checkbox",
"id": "blog_show_author",
"label": "Show author",
"default": false
},
{
"type": "checkbox",
"id": "blog_show_date",
"label": "Show date",
"default": true
},
{
"type": "checkbox",
"id": "show_view_all",
"label": "Show 'View all' button",
"default": false
}
],
"presets": [
{
"name": "Featured Recipe Blog",
"category": "Custom",
"settings": {
"blog": "News",
"post_limit": 3
}
}
]
}
{% endschema %}

We want them to look like the article lead-in sections like on the main Recipe Blog page, but having trouble getting there.

Hoping that someone can offer some solutions.

Thanks in advance.

Todd

[KetanKumar]

@FairTrade4 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.homepage-product-carousel ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.homepage-product-carousel ul li {
    padding: 0px 15px;
}
.homepage-product-carousel ul h2 {
    font-size: 20px;
    margin-top: 15px;
}

[FairTrade4]

Thanks Ketan!

That seemed to do the trick. I did have the CSS in the file section itself, but did not seem to do anything, but moving it to the theme.scss.liquid did the trick.

That was easy!

I might circle back to se if you cam help bring in some of the styling, but I will give it a go myself for now.

Thanks again,

Todd Bradford

[KetanKumar]

@FairTrade4 

great, thanks for update