donboe
January 19, 2018, 4:31pm
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
PaulOB
January 19, 2018, 5:05pm
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.
donboe
January 19, 2018, 5:54pm
3
Hi Paul thank you for the reply. What do you mean with the right viewport tag? Sorry for the ignorance
PaulOB
January 19, 2018, 6:01pm
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">
donboe
January 19, 2018, 7:50pm
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
PaulOB
January 19, 2018, 8:40pm
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.
donboe
January 21, 2018, 10:28am
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.
2 Likes
system
Closed
April 22, 2018, 5:28pm
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.