Giters

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.

Home Page:https://vanillaframework.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Stepped lists grid is broken in small screens

carkod opened this issue · comments

commented

Describe the bug

Grid extends incorrectly in small screens.

To Reproduce

Steps to reproduce the behavior:

  1. Go to this codepen with the Vanilla https://codepen.io/carkod/pen/mdovJWr
  2. Make the screen "mobile sized" ($breakpoint-small)
  3. Use the inspector tool as below

Screenshot from 2024-02-19 17-15-39

So as you can see if you turn on the grid button on any li element, the grid overlaps at the end.

Expected behavior

Grid should take have less span. Take a look at this quick fix

commented

Stepped list detailed seems to always use 6 column span for p-stepped-list__title (it seems that __content is using 4 columns on mobile, as expected).