is there any way to use Media Styles to set font-size in boxes (children? Descendants?) inside flex Containers?
I’ve had success using media styles in cases not involving flex containers.
Grateful for any help,
tony Castro
Yes - but do you really want to change the font size for any text that is within a flex container?
Generally, if you make text smaller on small screens, this makes the text harder to read.
The only situation in which I would personally consider reducing font size in a breakpoint is if you have a heading that won’t fit on a smaller screen (headings normally use a large font size, so there’s scope to reduce this without making them difficult to read). There are instructions on how to do this in the Media Styles section of the Xway User Guide.
If you really want to make other text smaller, you could use the following steps (not recommended):
- Select the flex container
- Add a media style that targets children of the flex container
- Set
font-sizeto your preferred value
This will reduce the font size that is set for flex items, which are children of the flex container. But it won’t necessarily reduce the size of all the text that is in these items. If you have defined the size of text in paragraphs (using the Paragraph Inspector), these sizes won’t change because paragraphs that have defined sizes don’t inherit font size from their parent item. You could get around this by targeting paragraph descendants (e.g. #flex-container p), but you may then find that you need to add other special cases.
The advice given in the Xway User Guide is: “Be sparing in the use of media styles. It is easier to create and maintain sites that are inherently flexible, and which do not require too many additional adjustments.”
Many thanks for the very prompt reply.
I will carefully consider your warning and all your tips.