Results 1 to 2 of 2
  1. #1
    Join Date
    Jan 2011
    Location
    Adelaide, Australia
    Posts
    1,453
    Plugin Contributions
    1

    Default image alignment - mobile view

    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

  2. #2
    Join Date
    Dec 2007
    Location
    Payson, AZ
    Posts
    944
    Plugin Contributions
    12

    Default Re: image alignment - mobile view

    Quote Originally Posted by shags38 View Post
    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... MySite..

 

 

Similar Threads

  1. v156 Download Order Info Mobile View
    By simon1066 in forum General Questions
    Replies: 6
    Last Post: 18 Apr 2020, 06:58 PM
  2. v155 Image alignment Desktop vs Mobile
    By shags38 in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 25 Aug 2019, 04:55 AM
  3. v156 link menu in mobile view
    By ColtSAA in forum General Questions
    Replies: 1
    Last Post: 26 Jul 2019, 04:31 PM
  4. Changing title in mobile view
    By amomandherblog in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 25 May 2017, 05:21 AM
  5. v139h Paragraph Alignment Problem on mobile device
    By lolwaut in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 20 Dec 2013, 10:45 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR