I need to make a grid with 6 columns in full screen that size down to 2 columns on smaller/mobile. Here is what I have tried so far. It looks correct wide, on my laptop, but when smaller, iPhone or tablet, it shows 6 columns still with very tiny images.
I changed the viewport from shrink to fit no to
I also made another page using col without the -6 or -xs and in smaller screens it shows all 6 columns, just tiny images now. Like this https://ibb.co/iyAdTG
on the Bootstrap documentation page for the grid they show they use col-(number) also for responsive breakpoints
This page is working fine on the iphone but shows one column of large images because you didn’t change the class that I suggested. i.e. change col-xs-6 to col-6.
This page isn’t working on desktop or mobile because you removed all the classes that you originally had.
You just used a class of .col which will try and fit in as many items in a row as it can. If you have 12 items of .col in a parent of .row then you get 12 across. If you had 2 items of .col in a parent of .row then you get 2 across and so on.
You need the classes from the first example except change the xs class for the col-6 that I already mentioned.
As I said the first example is showing one column of images on my iphone and would show 2 columns if you use the class as I specified.
If you have a different device issue then you will need to clarify a little more.
Sorry, should have been clearer. I was referring to the code not showing. Think we had a bit of a moment where more than one of us was trying to fix that. At the moment (fingers-x), it’s showing as it should. Whether it’s correct or not is another question.
You’re in good company. Backticks and “smart quotes” (curly quotes) catch a lot of newbies unaware. That is one of the (many) reasons it is helpful if we can see the actual code being used by the member.