1

I have got a menu page with two images. Basically I want the images to appear side by side on the web-browser (centered in a row) and when in mobile view I want them to appear on top of each other (in a column centered). As when the images are side by side in mobile view, they are too small to click.

I have been using framework7 style sheet row and column classes to place the images side by side on the web-browser. 

<div class="row">
    <div class="col-50">
       <a href="page1.html"><img src="css/images/image1.png" height="50%" width="50%"></a>
    </div>
    <div class="col-50">
        <a href="page2.html"><img src="css/images/image2.png" height="50%" width="50%"></a>
    </div>
</div>

When on mobile view these images still appear side by side as they do in the web-browser. I am not sure what the best way is to have them stacked when in mobile view. I have been trying a few things but haven't been able to get it working.

Jordan Wells
  • 101
  • 14
  • 1
    You are using a row class, that's why they appear in a row on both desktop and mobile. give the div an id and customise the css so the inner divs display inline-block. (and get rid of the inline style!) – Rachel Gallen Apr 29 '19 at 23:03
  • 1
    Thank you Rachel, that solution worked! Also, stupidly realised that my previsions attempts to fix it were not working because I forgot to disable cashe on the browser... ahh – Jordan Wells Apr 30 '19 at 18:01
  • yay! Damn those buggy caches... Yes inline-block is definitely handy for the mobile sites – Rachel Gallen Apr 30 '19 at 18:04

1 Answers1

0

You can create css classes that affects separately for Web and Mobile. That will be able to organise your mobile view with more flexibility. One way of doing that is add class name 'mobile' to your framework7 index.html when initialize the app checking web site is loaded on mobile.

You can check whether loading device is a mobile device by checking 'userAgent'. For more details How to detect a mobile device with JavaScript?

Then you can specify mobile only classes in below format. Ex: 

.mobile .container {
   color: red;
}
Arosha
  • 1,311
  • 2
  • 16
  • 22