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]

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
-%}

  

    {%- unless section.settings.heading == blank -%}
      

        ## 
          {{ section.settings.heading }}
        

        {%- if section.settings.blog != blank
          and section.settings.show_view_all
          and section.settings.post_limit < section.settings.blog.articles_count
        -%}
          
            {{ 'sections.featured_blog.view_all' | t }}
          
        {%- endif -%}
      

    {%- endunless -%}

    

    {%- if section.settings.show_view_all and section.settings.post_limit < section.settings.blog.articles_count -%}
      

        
          {{ 'sections.featured_blog.view_all' | t }}
        
      

    {%- endif -%}
  

    

{% 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.

[bandg]

hi, can i know what part of the code specifically did you change? I only noticed this part at the end but are there other parts?

.article-card-wrapper.card-wrapper {
padding: 5px;
}

Even though it worked for me when I copied over your code but some custom code of mine was gone so I want to backtrack. Plus, the pagination scroll is still there and view all button doesn’t appear on mobile.

[bandg]

It’s because the padding in the code is 15px. Find this portion of the code:

.article-card-wrapper.card-wrapper { padding: 15px; **-> play around with the padding here. I used 5px instead of the 15px in his original code and the aspect went back to normal.** }