Blog Page Navigation Breaks Widens Mobile Layout

[imsi32]

Have you checked that your issue isn't already filed?

• I read through FAQ and searched through the past issues, none of which addressed my issue.
• Yes, I have checked that this issue isn't already filed.

Bug description

Blog page navigation breaks widens mobile layout as it does not fit in.

How to reproduce the bug

1. Go to https://alshedivat.github.io/al-folio/blog/ in small screen.
2. You will be able to slide to right.

Error messages and logs

The error message you got, with the full traceback if available. Please paste it between these triple backticks.

What operating system are you using?

Not applicable (e.g. you're using GitHub Pages or other hosting)

Where are you seeing the problem on?

Deployed site

More info

blog-page-navigation-issue.mp4

[imsi32]

I am neither front-end developer nor designer but I find following adjustments which fixes the until 320px width without breaking main logic.

• Changing "Newer" and "Older" to arrows "<" and ">" in _includes/pagination.liquid.
• I couldn't find where it takes from but changing padding: .75rem 1.15rem in bootsrap.min.css in

.pagination-lg .page-link {
  padding: .75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

Images:

[george-gca]

You can add these css properties in _sass/_base.scss, since it is loaded after mdb and bootstrap here

al-folio/_includes/head.liquid

Line 68 in b7ee266

<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url | bust_css_cache }}">

it will override these values. If this works fine, can you send a PR for this?