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
<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:
- Go to '...'
- Click on '....'
- Scroll down to '....'
- 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.