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

row--25-75 - col containers do not set grid context properly

lyubomir-popov opened this issue · comments

Describe the bug
Paste this in a vanilla example, turn on the grid visualisation. You'll see 0 width columns, indicating the grid thinks it has more columns available than it does

image

<div class="row--25-75">
    
    <div class="col">
      <h2 class="p-heading--2">Resources</h2>
    </div>
    <div class="col">
      
      
     <div class="row">
        <div class="col-medium-1">
          <h3 class="p-heading--5" data-gtm-vis-recent-on-screen1014405_499="195" data-gtm-vis-first-on-screen1014405_499="195" data-gtm-vis-total-visible-time1014405_499="100" data-gtm-vis-has-fired1014405_499="1">eBook</h3>
        </div>
        <div class="col-medium-3">
          <p data-gtm-vis-has-fired1014405_503="1"><a href="https://pages.ubuntu.com/Forrester_TAP_Report_2016.html">Forrester Research - get more from the cloud</a></p>

        </div>
      </div>
      
      
    </div>
  </div>

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

Add any other context about the problem here.

This is due to the fact that there are no col-X class names for desktop at all. They need to be specified.

It's not a Vanilla bug. We have a separate issue open to fix deeper nesting of the grids.