Freecodecamp: Mobile preview render of 12 column grid not properly displaying

[aaronwi]

Challenge 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

[MiloATH]

Hi @aaronwi,

I understand what you mean. The challenge seems to be working as expected.

Here are some next steps that you should follow before we can help you with your query:

• Check these troubleshooting steps first.
• Please use the Chat Rooms or try looking through our forum for help with a specific challenge and any coding assistance.

IMPORTANT:
Please NOTE that this tracker is for reporting bugs and enhancements to freeCodeCamp's code base only.

Happy Coding!

[aaronwi]

the challenge works, but the visual display is not correct

[MiloATH]

Could you please submit your code? In the image you included, you have icons in the buttons which I don't think are suppose to be their. The 12 column grid is likely working correctly. Note: buttons don't use the whole col they are place inside.

[mihaid85]

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.

[aaronwi]

how would one use these columns without the padding?
the icons were specified as part of the tutorial

[MiloATH]

@aaronwi I don't think the icons aren't part of this specific challenge. The challenge display is correct.

Please, feel free to ask the gitter chat how to use these columns with the padding.

• Check these troubleshooting steps first.
• Please use the Chat Rooms or try looking through our forum for help with a specific challenge and any coding assistance.

IMPORTANT:
Please NOTE that this tracker is for reporting bugs and enhancements to freeCodeCamp's code base only.

Happy Coding!
This issue can be closed #14992.

[sogen]

I'd change the wording to say:
Before each text (Like, Info, Delete) add the corresponding Font Awesome icon.
So the student can at least see the trash icon.

[DavOnGit]

Can't understand this, there are no icons on this challenge, so what needs to be modified and how?

[QuincyLarson]

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.