How can I stack blog posts vertically on mobile using the Dawn theme?

[Slicks]

I am using the dawn theme and I would like my blog posts to sit under each other on a mobile rather than sliding accross, does anyone know how i can fix this?

[Nafiul · Accepted solution]

Hey Slicks,
It's an easy fix. You can to to your online store > Theme > Click on the 3 dots and Edit code > then find search from the theme editor and find the file called "featured-blog.liquid"

Delete the entire code and add this code : 

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-article-card.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-blog.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign posts_displayed = section.settings.blog.articles_count
  if section.settings.post_limit <= section.settings.blog.articles_count or section.settings.post_limit <= 4
    assign posts_exceed_limit = true
    assign posts_displayed = section.settings.post_limit
  endif
-%}
<div class="blog color-{{ section.settings.color_scheme }} gradient{% if section.settings.heading == blank %} no-heading{% endif %}">
  <div class="page-width-desktop isolate{% if posts_displayed < 3 %} page-width-tablet{% endif %} section-{{ section.id }}-padding">
    {%- unless section.settings.heading == blank -%}
      <div class="title-wrapper-with-link{% if posts_displayed > 2 %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
        <h2
          id="SectionHeading-{{ section.id }}"
          class="blog__title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
          {% endif %}
        >
          {{ section.settings.heading }}
        </h2>

        {%- if section.settings.blog != blank
          and section.settings.show_view_all
          and section.settings.post_limit < section.settings.blog.articles_count
        -%}
          <a
            href="{{ section.settings.blog.url }}"
            class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          >
            {{ 'sections.featured_blog.view_all' | t }}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}

    <slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      <ul
        id="Slidder-{{ section.id }}"
        class="bldog__posts articles-wrapper contains-card contains-card--article{% if settings.blog_card_style == 'standard' %} contains-card--standard{% endif %} grid grid--peek grid--2-col-tablet grid--{{ section.settings.columns_desktop }}-col-desktop sldider {% if posts_displayed > 2 %}slidder--tablet{% else %}slider--dmobile{% endif %}"
        role="list"
      >
        {%- if section.settings.blog != blank and section.settings.blog.articles_count > 0 -%}
          {%- for article in section.settings.blog.articles limit: section.settings.post_limit -%}
            <li
              id="Slide-{{ section.id }}-{{ forloop.index }}"
              class="blog__post grid__item article slider__slide slider__slide--full-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
              {% if settings.animations_reveal_on_scroll %}
                data-cascade
                style="--animation-order: {{ forloop.index }};"
              {% endif %}
            >
              {% render 'article-card',
                blog: section.settings.blog,
                article: article,
                media_aspect_ratio: 1.66,
                show_image: section.settings.show_image,
                show_date: section.settings.show_date,
                show_author: section.settings.show_author,
                show_excerpt: true
              %}
            </li>
          {%- endfor -%}
        {%- else -%}
          {% for i in (1..section.settings.post_limit) -%}
            {%- assign placeholder_image_index = forloop.index0 | modulo: 3 | plus: 1 -%}
            {%- assign placeholder_image = 'blog-apparel-' | append: placeholder_image_index -%}
            <li
              id="Slide-{{ section.id }}-{{ forloop.index }}"
              class="blog__post grid__item article slider__slide slider__slide--full-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
              {% if settings.animations_reveal_on_scroll %}
                data-cascade
                style="--animation-order: {{ forloop.index }};"
              {% endif %}
            >
              <div class="article-card-wrapper card-wrapper{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
                <div
                  class="
                    card article-card card--{{ settings.blog_card_style }}
                    {% if settings.blog_card_style == 'card' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %}
                    {% if section.settings.show_image %} card--media{% else %} card--text{% endif %}
                  "
                  style=" {% if settings.blog_card_style == 'standard' %} --ratio-percent: 100%;{% elsif settings.blog_card_style == 'card' %} --ratio-percent: 0%;{% endif %}"
                >
                  <div
                    class="card__inner{% if settings.blog_card_style == 'standard' %} color-{{ settings.blog_card_color_scheme }} gradient{% endif %} ratio"
                    style="--ratio-percent: 80%;"
                  >
                    {%- if section.settings.show_image == true -%}
                      <div class="article-card__image-wrapper card__media">
                        <div class="article-card__image media">
                          {{ placeholder_image | placeholder_svg_tag: 'blog-placeholder-svg' }}
                        </div>
                      </div>
                    {%- endif -%}
                    <div class="card__content">
                      <div class="card__information">
                        <h3 class="card__heading h2">
                          {{ 'sections.featured_blog.onboarding_title' | t }}
                        </h3>
                        <p class="article-card__excerpt rte-width">
                          {{ 'sections.featured_blog.onboarding_content' | t }}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="card__content">
                    <div class="card__information">
                      <h3 class="card__heading h2">
                        {{ 'sections.featured_blog.onboarding_title' | t }}
                      </h3>
                      <p class="article-card__excerpt rte-width">
                        {{ 'sections.featured_blog.onboarding_content' | t }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          {%- endfor -%}
        {%- endif -%}
      </ul>
      {%- if posts_exceed_limit -%}
        <div class="slider-buttons no-js-hidden{% if section.settings.post_limit < 3 %} medium-hide{% endif %}{% if section.settings.post_limit < 2 %} small-hide{% endif %}">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ section.settings.post_limit }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      {%- endif -%}
    </slider-component>

    {%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
      <div
        class="blog__view-all center small-hide medium-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        {% if settings.animations_reveal_on_scroll %}
          data-cascade
        {% endif %}
      >
        <a
          href="{{ section.settings.blog.url }}"
          id="ViewAll-{{ section.id }}"
          class="blog__button button"
          aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
        >
          {{ 'sections.featured_blog.view_all' | t }}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>


    <style>
      .article-card-wrapper.card-wrapper {
    padding: 15px;
}
    </style>

{% schema %}
{
  "name": "t:sections.featured-blog.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "heading",
      "default": "Blog posts",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "range",
      "id": "post_limit",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.post_limit.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "t:sections.featured-blog.settings.columns_desktop.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "background-1"
    },
    {
      "type": "checkbox",
      "id": "show_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_image.label",
      "info": "t:sections.featured-blog.settings.show_image.info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": false,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_view_all.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-blog.presets.name"
    }
  ]
}
{% endschema %}

 
I hope this will help.

[Slicks]

Amazing thank you! I will give this a go. Quick question before I update the code. It wont change the way its currently viewed on the desktop? Thanks again for the solution

[Nafiul]

Hey Slicks,
It will only affect on your mobile view. 

Note: this is the same code in the Dwan theme and i made a slight edit on that and provided you the entire code because it will be easier for you to update. 

Preview Desktop>

Preview mobile: 

[dlawson]

When I apply this code it achieves the vertical goal but unfortunately alters the photo aspect ratio and sizing so that they no longer display in exactly the same sizing both on desktop and mobile.  You may not have noticed this if your photos were all the same size in the first place.  Is that something you could correct?  Thanks very much!

[l1fel0ngle4rner]

Hi Dlawson, did you get this figured out?

[dlawson]

No I didn't, I don't have the coding knowledge to figure it out in a reasonable amount of time.