Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Mobile preview render of 12 column grid not properly displaying
See original GitHub issueChallenge Name
https://www.freecodecamp.com/challenges/use-the-bootstrap-grid-to-put-elements-side-by-side
Issue Description
Challenge preview buttons dont follow the 12-column grid, and include spaces between them, and appear to be of a fixed not fluid size. Changing text length does not change button width.
Browser Information
- Browser Name, Version: chrome 58
- Operating System: windows 8.1
- Mobile, Desktop, or Tablet: Desktop
Your Code
Screenshot
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (4 by maintainers)
Top Results From Across the Web
Bootstrap grid not rendering properly on mobile devices
I have the following bootsrap grid on my site. It works well for large and medium screen sizes but on a mobile/smaller screen...
Read more >Responsive grids and how to actually use them - UX Collective
Traditionally in a design system, the column width doesn't change but the number of columns change from 12 on desktop, to 8 on...
Read more >Bootstrap 4 Grid System - YouTube
Grid systems enable us to properly organize website content. ... Bootstrap's grid system has a division of columns ― up to 12 in...
Read more >Responsive web design basics
How to create sites which respond to the needs and capabilities of the device they are viewed on.
Read more >Create layout grids with grids, columns, and rows
They are ideal for designing responsive interfaces for web and mobile. ... There are a couple of reasons why a layout grid may...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Each of the buttons are inside divs that have padding, which is why there is whitespace between them. The bootstrap col-xs-4 has left and right padding 15px.
I’m closing this issue as stale since it hasn’t been active lately. If you think this is still relevant to the newly updated platform, please explain why, then reopen it.