Hi,

I have a problem on module K2 front-end.

I have that structure:

QUOTE:

<li class="even">
<a href="#"> Title </a>
<div class="moduleItemIntrotext"> Intro text </div>
<div class="clr"></div>
<div class="clr"></div>
<a href="#" class="moduleItemReadMore"> Read more... </a>
</li>
<li class="odd">
<a href="#"> Title </a>
<div class="moduleItemIntrotext"> Intro text </div>
<div class="clr"></div>
<div class="clr"></div>
<a href="#" class="moduleItemReadMore"> Read more... </a>
</li>
...

If I declare on Screen Reader the tag <a> of title, <div> of read more and <a> of read more, he overwrite the font-size declared and use the body page reference to increase and decrease the size.

How can i solve this?

Hi,

well this is what's supposed to do... overwriting the declared font-size to allow font increase/decrease.

What's the problem exactly?

I have declared the font-size directly on tags <a> and <div>.

If I insert that three tags on Font size custom selector, he overwrite the font-size of standard layout and use the font-size standard of body page.

I like to do it increase and decrease the font-size using the standard layout.

Example:
In my case I have title (first <a> tag) with 18px, the intro text (<div> tag) with 14px and read more (last <a> tag) with 10px.

When the user increase or decrease the font-size, I like to increase and decrease using the same proportion, not the same size of three tags.


P.S: thank you for the quick answer.

Hi now i understand

To do this you need to use a different approach otherwise it won't work.

You must remove inline styling from elements and use an external CSS, moreover not use 'px' but 'em' as unit of measure.
Using 'em' and the global 'font-size' in percentage assigned to the body tag the resize will keep ratio between the 3 different tags.

Of course you have to remove the custom font size selectors and use the global one only for the body tag.

Cheers,

John

Ah yes, we are in process to remove the 'px' to 'em'.
In current layout, he work with 'px'.

In my case, my approach is the tag <li>. The Title (first <a> ), introtext (<div> ) and read more (last <a> ) have the same approach. Is that means the three goes to the same size even with 'em'?


The font-size of that tags are external CSS. I use on tags above just for explain.

The correct way to do this is using CSS class applied to various elements, each one with the desired font size in em.

For example

.title {font-size. 1.5em}

.introtext {font-size. 1em}

.readmore{font-size. 1.2em}

in this way the dynamic font sizing applied to the root body tag in % will have the effect to resize keeping proportions.