There are is no doubt that in today's world, mobile rules.
So much so that there is even an epidemic of changes to our physical structure because we spend so much time looking at our phones and mobile devices.
Tendenci is built to be responsive. Out of the box your software is mobile friendly :)
But what happens when you want to add new content like tables or images to your site that still look good on those mobile devices.
Enter the html feature "classes".
When you upload a new image or build a new table in your website, you'll want to do the following.
To Make Images Responsive
1. After you have uploaded your image, click on the <> button to view your html code.
2. Look for < img in the window
3. Immediately after < img type class="img-responsive"
4. Click okay at the bottom of the source code editor to save and voila, your image will now shrink when viewed on a mobile device.
To Make a Table Responsive
If you have fixed width sizes set (i.e. width:500) the table will not squish on mobile. If possible, the best practices would be to avoid fixed sizes at all cost.
1. After you have added your table, click on the button to view your html code
2. Look for < table in the window
3. Immediately after < table type class="table"
Note: You can also stylize the table by including other classes available from bootstrap v3 documentation. Here are the available classes you can include:
- Immediately after < table type class="table table-striped"
- Immediately after < table type class="table table-bordered"
- Immediately after < table type class="table table-hover"
- Immediately after < table type class="table table-condensed"
Make your videos mobile responsive
Check out this help-file and learn how to make your videos responsive.