One of the complaints I’ve received on one of my websites (https://chrisgrigorov.com) is that the Real Accessibility plugin does not increase the size of the font enough.

When clicking the increase font size button a few times it stops increasing the font size at some point, but the font is still not large enough for people with severe sight problems.
I’m using the Twenty Twenty-One WordPress theme. Might this be because it has reached the maximum font size allowed by the theme?

I’m still new to programming, but I’ve looked through the code and in the real-accessability.js file I’ve found this section:

// Make font bigger
function increaseFont() {
if(obj.fontSize < 3) {
showLoader(function() {
obj.fontSize++;
$(settings.markup).not(settings.exclude).each(function() {
var fontSize = parseInt( $(this).data(‘raofz’) );
$(this).css(‘font-size’, fontSize+(2*obj.fontSize));
});
});
}
}

Maybe I can fix it from here, but I really don’t know right now, because as I said I’m still new and learning to program especially with JavaScript.

Can you help me out with this? I want there to be no limit to how much the user can increase the font size?

I added code in additional css to increase the font size after adding font size increased. but after adding code it effected with horizontal scrolling on mobile devices.

how to increase the paragraph font size without getting the horizontal scrolling issue.

the code i added to increase the font size.

p { 
font-size:16px; 
} 

Thanks for your valuable suggestions.

I have a somewhat amateurish doubt. But I really could not do it myself.

I need to increase the font size of my site’s mobile theme, currently the Jetpack Minieleven. How can I do this?

My site is blogdocaminhoneiro.com

Very nice plugin you have created. It’s really helpful.

Could you please help me on this.

When i click on increase font size then first it will reset all font size to same which is “font-size: 17.7px;” then from second click it will start increase.
I mean at first click it will reset font size to 17.7px so problem is font which is already bigger then 17.7px that font size decrease instead of increase.

Also, how do I include checkout add-on extensions data into the packing slip?
Currently it is appearing only in invoice but not in packing slip.

1) The font size is smaller than the default one in my theme. I’ve tried the fix from another request:

.wprm-recipe {
    font-size: 14px;
}

but it only increases some of the text (the categories etc, but not the instructions and notes). Could this be fixed via CSS ?

2)
I would really really love the WPRM to use my themes default font (Google font: Coming+Soon). I tried to enter it into the setting, but it did not work.

Example: https://drkoch.dk/oreo-cheesecake/

I really hope that you can help me out. If my recipe blog keeps evolving and I get keen doing even more I might purchase the Premium version over time. But I would like to use the free one here in the beginning

Thanks a lot,
Lars Koch Hansen, Blogger at www.drkoch.dk

/* Text elements */
p {
margin-bottom: 18px;
}
/*ul {
list-style: square;
margin: 0 0 18px 1.5em;
}*/
ol {
list-style: decimal;
margin: 0 0 18px 1.5em;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
margin-bottom: 0;
}
dl {
margin: 0 0 24px 0;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 18px;
}
strong {
font-weight: bold;
}
cite,
em,
i {
font-style: italic;
}
big {
font-size: 131.25%;
}
ins {
background: #ffc;
text-decoration: none;
}
blockquote {
font-style: italic;
padding: 0 3em;
}
blockquote cite,
blockquote em,
blockquote i {
font-style: normal;
}
pre {
background: #f7f7f7;
color: #222;
line-height: 18px;
margin-bottom: 18px;
padding: 1.5em;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
sup,
sub {
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
input[type=”text”],
textarea {
background: #f9f9f9;
border: 1px solid #ccc;
box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
padding: 2px;
}
a:link {
color: #0066cc;
}
a:visited {
color: #743399;
}
a:active,
a:hover {
color: #ff4b33;
}

/* Text meant only for screen readers */
.screen-reader-text {
position: absolute;
left: -9000px;
}

/* =Header