1. 

   wcamp
   

   offline

   Member

   Hi, all:

   I can't get a media query to reduce the size of a PBX thumbnail- image caption when viewed on smart phones. Vertically, the text to the left of the thumbnail looks terrible.

   On my external style sheet, I entered the following in the "0 to 700px" media query, to get a very small font size but it isn't recognized when viewed in responsive design mode.
   . . .
   p.caption, .caption {
   font-size: 0.25em;
   }
   . . .

   The image needing its caption size controlled is in the fourth ¶ of this page:
   https://www.warrencampdesign.com/hebrews/part1/week5.php

   Please suggest an appropriate entry to control the font size of captions for PBX thumbnail images.

   Thanks, very much!

   Warren

   Posted 3 weeks ago
2. 

   Gerry
   

   offline

   PVII Team

   There is already a font-size style rule in another media query that takes precedence. To overcome that you just need to add the !important directive to your rule, like this:

   p.caption, .caption {
   font-size: 0.25em !important;
   }

   Posted 3 weeks ago
3. 

   wcamp
   

   offline

   Member

   I appreciate your prompt suggestion, Gerry. It works well.

   Because I want to understand how this additional "!important" entry works, would you please tell me which "font style rule in another media query" is taking precedence? I cannot find one with a similar ID.

   Sinclair had told me recently to avoid overdoing the !important entry. In this case, I opted to not use it, thinking that "p.caption, .caption" was the correct rule title to use within the smallest-size media query segment.

   I'm eager to learn from you, Gerry.

   Thanks, in advance.

   Warren

   Posted 3 weeks ago
4. 

   Gerry
   

   offline

   PVII Team

   In your hebrew-styles.css, in the media query, line 558 is this rule:

   p, ul {
   font-size: 86% !important;
   }

   It has the !important directive so it will over-ride any other rules. ALL p tags will have the font-size set to 86%, this is the caveat that Sinclair was referring to. Once you start using !important you'll also need to use !important to over-ride it for any special rules that affect the same elements. So in order for your 'p.caption, .caption' rule to take effect you need to raise it's relative specificity by assigning the !important directive to it.

   There most likely was a reason to assign the !important to the p,ul rule so the only way to over-ride it is to add the !important directive to your caption rule.

   If you can remove the !important from the p,ul rule then the normal specificity will work again and your original rule would not need the !important directive.

   Posted 3 weeks ago
5. 

   wcamp
   

   offline

   Member

   Your explanation and suggestion were understandable, Gerry. Thank you for clarifying that for me.

   Following your suggestion, I removed the "!important" declaration from "p, ul" rule in the style sheet's media query segment and gave extraordinary values to that rule's font size and "p.caption, .caption", as follows:
   . . .
   p, ul {
   font-size: 46%;
   }
   . . .
   p.caption, .caption {
   font-size: 2.15em;
   }
   . . .

   Sadly, neither rule's values get recognized.

   Should I revert to this morning's values and also add the "!important" declaration to "p.caption, .caption"? If not, what do you recommend?

   I won't change anything until I hear back from you on this.

   Thanks, pal.

   Warren

   Posted 3 weeks ago
6. 

   Gerry
   

   offline

   PVII Team

   There is still an !important on one of the rules, and with the number of rules that are affecting the <p> tag your 2.15em size will only take effect when the screen is between 569px and 699px in width.

   Here's the rundown:

   Your base rules:

   line 160:
   .main-content p {
   line-height: 1.4em;
   margin-bottom: 10px;
   }

   line 223:
   p.caption, .caption {
   font-size: 0.71em;
   text-align: center;
   line-height: 1.3em;
   margin: 6px 0 0 0;
   padding: 2px 0 0 0;
   }

   Now the <p> tag rules in all 4 media queries:

   line 632:
   @media only screen and (max-width: 568px) and (min-width: 0px)
   .main-content p {
   font-size: 0.78em;
   }

   line 558:
   @media only screen and (max-width: 700px) and (min-width: 0px)
   p, ul {
   font-size: 46%;
   }

   line 564:
   @media only screen and (max-width: 700px) and (min-width: 0px)
   p.caption, .caption {
   font-size: 2.15em;
   }

   line 512:
   @media only screen and (max-width: 1000px) and (min-width: 700px)
   p, ul {
   font-size: 88% !important;
   }

   The extreme rule you set, 2.15em, as you can see from the media breaks above, will only be effective when the browser window is between 569px and 699px.

   Posted 2 weeks ago
7. 

   wcamp
   

   offline

   Member

   Many thanks! I BELIEVE that I understand what you've written.

   Let me explain what I'd previously thought. First, that the values in the "p. ul" rule in a media query would be affected by or take precedence over a rule in the same media query segment, so long as it had a specific class. That is, I thought that, regardless of the font size set in "p, ul" of a media query, the font size value for the <p> tag having a ".caption" class would rule on its own. It appears that I was wrong with that presumption.

   Here's what I've now done; kindly advise me of any wrongdoing.

   a. In the "700px to 1000px media query," I entered this:
   . . .
   p.caption, .caption {
   font-size: 88%;
   }
   . . .

   b. For the smaller "0px to 700px media query," I entered a smaller font size:
   . . .
   p.caption, .caption {
   font-size: 76%;
   }
   . . .

   c. For the "0px to 568px media query," I removed the ".main-content p" rule that appeared to conflict with the font size of the <p> tag when viewed in "0px to 568px" windows.

   Having done that, I like the font sizes of the <p> tag and the "p.caption" rule, no matter the narrowing width of the browser window. AND, none of the "p, ul" media query entries have an "!important" declaration!    (  ; - )

   Have I understood what you've written correctly?

   Does the <p> font size look appropriate to you when the window is narrowed on your device?

   Might you suggest a further tweak? . . .

   Thanks, yet again, Gerry.

   Warren

   Posted 2 weeks ago
8. 

   Gerry
   

   offline

   PVII Team

   Yep, you've understood this perfectly! It' now very manageable, checked on my iPhone and the text size looks great.

   Posted 2 weeks ago
9. 

   wcamp
   

   offline

   Member

   I'm relieved, Gerry, and most grateful for your checking my page and giving me valuable feedback.

   I appreciate you being my facilitator and teacher.

   Many thanks, my friend!

   Warren
   _______

   Posted 2 weeks ago
10. 

    Gerry
    

    offline

    PVII Team

    Thanks Warren!

    Posted 2 weeks ago

RSS feed for this topic

Reply

You must log in to post.