1. 

   wcamp
   

   offline

   Member

   Hi, all:

   I'm not familiar with how to effectively size an already large PBX image when it becomes enlarged. Please help me know how best to size the large JPEG image.

   On each of these three example pages, click the thumbnail at the right side of each page: It reads "Repeated Word."

   On this first page, I set the "max width" of the enlarged image to 660 pixels. When it enlarges at that size, the text is very small and difficult to read. (On smartphones, it much more difficult to read until it's enlarged further.)

   https://www.warrencampdesign.com/hebrews/part3/week27.php

   On this second page, I gave "max width" a value of 1000 pixels. Enlarged at that size, the text is easy to read but the top and bottom of the image gets cut. (On smartphones, it also loses its top and bottom.)

   https://www.warrencampdesign.com/hebrews/part3/week28.php

   And, on this third page, the enlarged image has been given a "max width" of 1000 pixels. The text is very easy to read and the top and bottom appear as intended on all sizes of devices.

   https://www.warrencampdesign.com/hebrews/part3/week25.php

   What "max width" value should I give the already large image so that, when it opens on computers and tablets, the text is easy to read (having a size similar to what's shown on the "week25" page) and the top and bottom of the large image do NOT get cut off?

   Thank you, my friends.

   Warren

    

   Posted 3 months ago
2. 

   wcamp
   

   offline

   Member

   I haven't received a response yet so I'll repost my above-referenced request.

   Thanks, in advance.

   Warren

    

   Posted 3 months ago
3. 

   Gerry
   

   offline

   PVII Team

   Hi Warren,

   The images will always scale down to the size of their html container. While you can experiment with optimal max-width settings for one particular image you'll never be able to find a 'one setting fits all' when the image contains text that should remain readable.

   Your image just contains text, you should not use images to convey text since the sizing will vary with the size of the browser. This should , instead, be set up as text, and MBX content slide that contains text. You can style it as you like. The text will them remain fully readable on all devices without any further adjustment. Bottom line, do not use scalable images to convey text.

   Posted 3 months ago
4. 

   wcamp
   

   offline

   Member

   Many thanks for clarifying this, Gerry.

   Because I don't have your MBX product, would it be acceptable to convert those large text-only image files to a PDF that PBX will present in Lightbox mode? Or will PDF files also be a scalable image?

   Wondering Warren

    

   Posted 3 months ago
5. 

   Gerry
   

   offline

   PVII Team

   I referred to MBX erroneously, I should have said PBX. The PBX system also allows you to have text in the PopBox. Just use PBX for this.

   Posted 3 months ago
6. 

   wcamp
   

   offline

   Member

   Hi, Gerry:

   I was glad to learn that I could perform your suggested effort on PBX, which I use daily. Love it!

   On my current page, I've replaced my text-only image files with new PBX instances of styled text slides. Both identical slides look attractive and resize appropriately without compromising the legibility of the text. Kudos to you and PBX for that!

   I've got one closing question related to media queries for this page's two PBX text slides. In the tenth paragraph — starting with "By faith, barren Sarah" — of the following linked page, and in the thumbnail to that paragraph's right side, the text slide's title, "Key Words Repeated in 'Hebrews,'" shrinks considerably when I minimize screen size.

   https://www.warrencampdesign.com/hebrews/part3/week28.php

   I attempted four or five media query rules to control font size with smaller devices but none were successful. Would you please enlighten me so I can control the font size for that <h2> header, to which I've assigned this: class="centered main-content serifFont" style="font-size:1.82em"?

   Thanks very much.

   Warren

    

   Posted 3 months ago
7. 

   Gerry
   

   offline

   PVII Team

   There is a font-size rule that sets the small text in your style sheet, in a media query at line 638:

   .serifFont {
   font-size: 0.59em !important;
   }

   Since your <h2> in the PBX is assigned this serifFont class it will be rendered at the .59em (small).

   You can remove the serifFont class or adjust the 0.59em.

   Posted 3 months ago
8. 

   wcamp
   

   offline

   Member

   That makes sense. Thanks for pointing that out to me, Gerry.

   Because ".serifFont" is used elsewhere on this site with different styling, I created a new class for this page's PBX text-slide title: ".serifFont_repeatedWords". For the three media query image sizes, that title now takes an appropriate font size when the screen narrows. Thanks for helping me with this.

   Now that the <h2> title is set to reduce its font size on smaller screens, I need to do similarly with the text of the two PBX slides. I attempted to do so using the third rule in this list:

   . . .
   .serifFont {
   font-size: 0.59em !important;
   }
   .serifFont_repeatedWords {
   font-size: 1.51em;
   }
   .pbx-hebrewsTooltip {
   font-size: 80%;
   }

   . . . but that isn't working. How, in the media queries sections, should I call a rule for the PBX text slide contents that has no <p> tags?

   https://www.warrencampdesign.com/hebrews/part3/week28.php
   https://www.warrencampdesign.com/hebrews/css/hebrews-styles.css

   Warren
    

   Posted 2 months ago
9. 

   Gerry
   

   offline

   PVII Team

   You will need to make the rule more specific so that it over-rides the default .pbx-content rules, try this:

   .pbx-content.pbx-hebrewsTooltip {
   font-size: 80%;
   }

   Posted 2 months ago
10. 

    wcamp
    

    offline

    Member

    Yes, indeed. That makes the difference.

    Thanks very much, Gerry.

    Warren
     

    Posted 2 months ago

RSS feed for this topic

Reply

You must log in to post.