Hello,
I started to have mobile usability problems after the generatepress theme update on my 2 blog sites. In my 2 sites, I started getting the questions The text is too small to read and Clickable items too close together for all my articles in the Google Search Console tool.
also Elements with visible text labels do not have matching accessible names for the “read more” button in the summary section of the articles on the homepage in google page speed insights tool. I’m starting to get the problem.
And again, I started to get the “Links rely on color to be distinguishable” problem in the category names under my articles on the homepage.
How can I solve these problems? I would be glad if you help.
Additional css codes on my site:
- {
-webkit-touch-callout: none; /* iOS Safari / -webkit-user-select: none; / Safari / -khtml-user-select: none; / Konqueror HTML / -moz-user-select: none; / Old versions of Firefox / -ms-user-select: none; / Internet Explorer/Edge / user-select: none; / Non-prefixed version, currently supported by Chrome, Opera and Firefox / } .mg-nav-widget-area-back { background-image: none !important; } / SSS Görünüm / .rank-math-list-item { -webkit-box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.75); border-radius: 4px; margin: 1em auto; overflow: hidden; padding: .5em .8em; } / H2 – H3 */
.single-post .entry-content h2 {
padding-top: 10px;
padding-bottom: 10px;
font-size: 30px;
border-left: 20px solid rgba(52, 62, 71, 100);
padding-left: 15px;
background-color: rgba(236, 241, 237, 1);
background-image: none;
}
.single-post .entry-content h3 {
padding-top: 10px;
padding-bottom: 10px;
font-size: 25px;
border-left: 20px solid rgba(145, 221, 232, 100);
padding-left: 15px;
background-color: rgba(236, 241, 237, 1);
background-image: none;
}
/* Ana Sayfa Başlık ve Metalar */
.entry-title a {
color:#2f4468!important;
font-weight:600!important;}
.entry-meta a {
color: #00074f!important;}
.entry-meta a:hover {
color: #000!important;}
.inside-article, .sidebar .widget {
border: 1px solid #e7e7e7;
border-radius: 5px;}
/* Ana Sayfa Read More */
a.read-more.button{
background-color:#000;
color: rgb(255, 255, 255);
width: 190px;
height: 54px;
min-height: 0px;
min-width: 0px;
max-height: none;
max-width: none;
text-align: center;
font-weight: 600;
font-size: 18px;
border-color: transparent;
padding: 12px 15px;
border-radius: 10px;
transition: all 0.5s;
position: relative;
}
a.read-more.button:hover{
padding-right: 24px;
padding-left:8px;
background-color:#212121;
}
.read-more-container{
float: right;
}
/* İçerik Tablosu Kenar / .lwptoc_i{ background-color:#343e47; border-style:solid; border-width:3px; border-color:#343e47; } / İçerik Tablosu / .entry-content a:not(.button):not(.wp-block-button__link):not(.gb-button) { text-decoration: none; background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px ); background-size: 0% 6px, 100% 6px; background-position: 0 bottom, 0 bottom; transition: background-size 0.3s ease-in-out; background-repeat: no-repeat; padding-bottom: 3px; font-weight: 600; } / İçerik Tablosu İç Link / .entry-content a:hover:not(.button):not(.wp-block-button__link):not(.wp-block-button__link){ color: #115cfa; background-size: 100% 6px; } / Diğer */
.home .inside-article {
padding: 30px !important;
}
.category .inside-article {
padding: 30px !important;
}
.category .page-header { padding: 50px 30px 50px 30px !important;
background-color:transparent;
}
.page-header h1 {
font-size: 1.5em;
margin-top: -30px;
}
.entry-header h1 {
text-align: center;
}
/* Alıntı Görünüm / blockquote { background-color: rgba(236, 241, 237, 1); border-left: 20px solid rgba(190, 144, 36, 100); padding: 15px; font-style: inherit; font-size: 18px; margin: 0 0 1.5em; } / YouTbe Video / .wp-block-embed__wrapper{width:650px;} .is-provider-youtube{display: flex;justify-content: center; margin-bottom: 30px;} / Sabit Bileşen */
.inside-right-sidebar {
height: 100%;
}
.inside-right-sidebar aside:last-child {
position: -webkit-sticky;
position: sticky;
top: 70px; /*Adjust position */
}
/* Sidebar Düzenlemeleri */
.widget-area .widget {
padding: 10px;}
.paging-navigation {font-size: 24px; padding-right: 10px;}
figure img {
margin-bottom: 15px;
}
/* Constrat Ratio Kodu / .wpp-post-title { color: #2f4468 !important; } / Sidebar Yok Et */
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}
Font settings on my site:
The page I need help with: [log in to see the link]