Re: image alignment - mobile view
Originally Posted by
shags38
v1.5.5f php 7.1
When putting images in a row of 3 or 4 on a page they show up in a row in mobile view very truncated and obviously hard to see - additionally the images have links in them which become difficult to be effectively used (in mobile).
How can I set them up so that in mobile view the images show as one under the other so they are larger on the screen?
the code I use for 4 images in a row is typically like this;
Code:
<div class="row">
<div class="column"><div align="center"><a href="link"><img alt="" src="" style="width:22%" /></a> <a href="link"><img alt="" src="" style="width:22%" /></a> <a href="link"><img alt="" src="" style="width:22%" /></a> <a href="link"><img alt="" src="" style="width:22%" /></a></div></div></div>
so is there code that will drop the images into a column in mobile view?
cheers,
Mike
You could try removing the style width percentage.. In responsive view, percentage on a single image larger then mobile screen well reduce view to match the screen size, where fixed width on images less then or equal to mobile screen well force them to stack if nested within containers. Even without CSS..
as;
Code:
<div class="">
<div class="">
<a href=""><img src="" alt="" title="" width="164" height="105"></a>
<a href=""><img src="" alt="" title="" width="165" height="106"></a>
<a href=""><img src="" alt="" title="" width="164" height="105"></a>
</div>
</div>
basically like the three images on my main page. While the map using viewbox scales..
The images well stack and the map scales to the screen size.
Dave
Always forward thinking... Lost my mind!
Bookmarks