🎄🐾Our offices will be closed from December 22nd through January 1st. Wishing you love, safety and peace this holiday season, and together, we look forward to a promising New Year!☃️

There is no doubt that in today's world, mobile-friendly rules. 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 looks good on those mobile devices?

Enter the html feature "classes".

When you upload a new image or build a new table on 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.

 Tendenci WYSIWYG

2. Look for < img in the window

 

3. Immediately after < img type class="img-responsive"

IMG Tag Responsive Tendenci Help File Example

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. 

5. Alternative option. In the Insert/edit image option in your WYSIWYG, select "img-responsive" and click ok. 

Image Responsive Tendenci Help file Example

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 practice would be to avoid fixed sizes at all costs.

1. After you have added your table, click on the button to view your HTML code.

WYSIWYG Source Code Tendenci Help File Example

 

2. Look for < table in the window

 

3. Immediately after < table type class="table"

Table Class Tendenci Help File Example

 

Note: You can also stylize the table by including other classes available from bootstrap v3 documentation. Here are the available classes you can include:

  1. Immediately after < table type class="table table-striped"
  2. Immediately after < table type class="table table-bordered"
  3. Immediately after < table type class="table table-hover"
  4. 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. 

 

Did this answer your question? If not, please contact our support team for more information.

 

 

 

Contact us to upgrade to Tendenci

The open source solution chosen by associations around the world.

Want to talk? (281) 497-6567

Sign up for Tendenci - The Open Source AMS

No per user pricing. Unlimited admins.

Demo Now

Have Questions?

Contact us!

Site Search