Bootstrap from 4 columns(big screens) to 2 columns(small screens)


#1

I have a small image gallery, where i would like to go from 4 columns on bigger screens to 2 columns on mobile screens. I have I have the meta viewport in place and theis is what I have right now for the gallery::

<ul class="row gallery">
	<li class="col-md-3 col-xs-6">........</li>
    <li class="col-md-3 col-xs-6">........</li>
	<li class="col-md-3 col-xs-6">........</li>
    <li class="col-md-3 col-xs-6">........</li>
	<li class="col-md-3 col-xs-6">........</li>
    <li class="col-md-3 col-xs-6">........</li>
	<li class="col-md-3 col-xs-6">........</li>
    <li class="col-md-3 col-xs-6">........</li>
	<li class="col-md-3 col-xs-6">........</li>
    <li class="col-md-3 col-xs-6">........</li>
	<li class="col-md-3 col-xs-6">........</li>
    <li class="col-md-3 col-xs-6">........</li>
	<li class="col-md-3 col-xs-6">........</li>
    <li class="col-md-3 col-xs-6">........</li>
	<li class="col-md-3 col-xs-6">........</li>
    <li class="col-md-3 col-xs-6">........</li>
</ul>

But as you can guess, that isn't working


#2

That seems to be correct for me and is working on desktop and should work on smaller devices assuming you have the correct viewport tag in place.

Of course you will get snagging if list heights are not exactly the same size.

I'd need to see your actual page.


#3

Hi Paul thank you for the reply. What do you mean with the right viewport tag? Sorry for the ignorance :frowning:


#4

You mentioned it first so you must know what it is lol ?

What are you using?

This is the one that is correct.

<meta name="viewport" content="width=device-width, initial-scale=1.0">


#5

Yes that's what I use:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Edit: The list heights are the same they are cut to the same size in the CMS


#6

You’ll have to give a link to the page concerned or at least provide a screenshot of the problem you see and in which devices you are seeing it.

Alternatively knock up a quick codepen showing the problem.


#7

Hi Paul. Thanks again for the reply. It is working fine now. I did't clean the cache, that's why I didn't see the changes.


closed #8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.