~~~~~~~~~~~~ IMPORTANT INFORMATION -- Please read! ~~~~~~~~~~~~

1. The "search..." box above searches the Docs & Forum Posts. The "Search" tab above just searches the Forum Posts. :side:
Please use these to search for your issue *before* creating a new message topic, as your issue may have been previously solved.
2. Please put your Club # and Club Web Address in your Forum Signature (best) OR in each post to get faster support from us.
Click here to edit your signature at the bottom of the Profile Information tab.
3. Our user and admin docs are available at: support.toastmastersclubs.org/doc "There's a doc for that!" ;)
4. There is an "Opt In" Feature for newly added members. The Opt In document explains the [strike]strikethrough[/strike] member information. Click Here to View the Post
5. When posting a New Topic , please include all relevant details and be specific. When did your issue 1st occur? What operating system, browser, & browser version are you using? Did you refresh your browser cache? Are your cookies enabled? Lastly, a screen shot is often helpful.
6. Please abide by the Terms of Use . We are volunteers contributing our spare time. We are happy to assist you, so long as you are respectful and courteous.
7. We are always looking for new FreeToastHost Ambassadors to join our team and support fellow Toastmasters in their use of the FreeToastHost website system. If you are familiar with the system and have some interest, send a Send Us a Private Message.

How to make your website content "responsive" / mobile friendly

More
6 years 11 months ago - 6 years 11 months ago #71188 by SteveTheTechie
Replied by SteveTheTechie on topic 3. How to make your website content "responsive" / FONT SIZE

marc33 wrote: CKEditor allows the choice of specific size fonts. Where would you select a %?


Well, that is the challenge... CKEditor 4.x was never really designed for responsive layouts--it only gives you fixed pixel selections for fonts. The developers know that and the next major version (version 5.x) is supposed to address that, but it is really a huge departure from version 4.x so it may take me a while to figure out how to make use of it in FTH. There are some plugins for the editor (like ckeditor.com/cke4/addon/imageresponsive ) but plugins are sometimes not well supported and sometimes buggy.

The short answer on how to change fonts to percentage is that you will need to do that in Source View. There are a variety of font size conversion charts available online that you can reference that can help... For example: here is one of several I found: websemantics.uk/articles/font-size-conversion/

These sorts of issues are why I probably will implement some sort of new Web Page Tool at some point to help with the responsive content conversion. Most people do not want to have to get into the Source View / underlying HTML.
Last edit: 6 years 11 months ago by SteveTheTechie.
The topic has been locked.
More
6 years 11 months ago #71209 by marc33
Replied by marc33 on topic 3. How to make your website content "responsive" / FONT SIZE
Since Source view is where you suggested we go to modify videos, I played around with percentages in Source view and came away with a satisfactory result. The average user would look at the code though and be clueless. If V 5 does in fact have font sizes as % like for pictures, a lot more people will be served. What you’re doing is superhuman and we all thank you.
The following user(s) said Thank You: GiovanniLizama
The topic has been locked.
More
6 years 11 months ago #71257 by cbb
Replied by cbb on topic How to make your website content "responsive" / mobile friendly
Hi Steve,

SteveTheTechie wrote: 2. Iframes and Embedded Objects

This wrapping approach should also work for Flash and embedded objects. There is some responsive styling (CSS) "magic" applied to the elements with the "video-container" class name.


Thank you for all the handy tips. Our website is now mobile phone-friendly. The only tricky bit is that our image slideshow now needs some vertical scrolling to see the caption. Specifying a longer height doesn't do anything. Is this something that can be addressed by some responsive CSS-styling of the <div> or class name? Otherwise, maybe I should just crop images shorter next time?

Many thanks,
Carmen.
Club #8036
Club #8036
The topic has been locked.
More
6 years 11 months ago #71260 by SteveTheTechie
Replied by SteveTheTechie on topic How to make your website content "responsive" / mobile friendly

cbb wrote: Hi Steve,

SteveTheTechie wrote: 2. Iframes and Embedded Objects

This wrapping approach should also work for Flash and embedded objects. There is some responsive styling (CSS) "magic" applied to the elements with the "video-container" class name.


Thank you for all the handy tips. Our website is now mobile phone-friendly. The only tricky bit is that our image slideshow now needs some vertical scrolling to see the caption. Specifying a longer height doesn't do anything. Is this something that can be addressed by some responsive CSS-styling of the <div> or class name? Otherwise, maybe I should just crop images shorter next time?

Many thanks,
Carmen.
Club #8036


I would probably have to take a look at it... Could point me to specifically what you are referring to? (which page, which element, etc.) Your case could maybe help me figure out what I should do for a web page responsive conversion tool.

All this additional stuff that has to be done on content is why it took me so long to do a responsive version of FTH... I suspected it would be more involved than everyone thought. ;)
The topic has been locked.
More
6 years 11 months ago #71261 by cbb
Replied by cbb on topic How to make your website content "responsive" / mobile friendly
Thanks, Steve.

It's right on our homepage with the following slideshow iframe:

<iframe width="500" height="1200" src=" citymiddaytoastmasters.toastmastersclubs...path=firstslide.html " >style="border: none; margin: 0; padding: 0;"

I've tested different height values, along with not specifying height at all. I also tried to replace that CSS style with iframe-specific attributes. The iframe size seems to have been frozen since wrapping the code in the <div> container that you've specified. So now the slideshow needs scrolling in both my flipbook and phone.

Anyway, would be good to get rid of scrolling, eventually. Will be consulting Dr Google while you work your magic. Very happy with the new FTH2 template. Thanks for dragging it over to the 21st century! :-)

Carmen
Club #8036
The topic has been locked.
More
6 years 11 months ago - 6 years 11 months ago #71262 by SteveTheTechie
Replied by SteveTheTechie on topic How to make your website content "responsive" / mobile friendly
Ok, I am going to tell you what I think you should do...

Instead of using:

<div class="video-container">
<iframe ... ></iframe>
</div>

Use:

<div class="video-container" style="padding-top:75%;padding-bottom:0">
<iframe ... ></iframe>
</div>

Adjust the padding numbers above as needed to get a good result. The percentage number should be equal to (iframe height / available width * 100%) and the padding-bottom should be any extra fixed height that should always be included. You should be able to use 670 for the "available width". The defaults for these are pre-set for the video container class in my style sheet, but they are set as 56.25% and 30px which works for most YouTube videos, but in your case it looks like your height is a bit larger (as a percentage), so you should override the defaults.

This is a good example of where having a tool may help since I could make the code get the actual iframe dimensions and adjust the wrapper accordingly.
Last edit: 6 years 11 months ago by SteveTheTechie.
The following user(s) said Thank You: cbb
The topic has been locked.
Time to create page: 0.258 seconds

Copyright © 2025 FreeToastHost 3 Support. All Rights Reserved.