Hi, I am currently redesigning my site to be more mobile-friendly. Most of it works allright using fingers to navigate, only the "read more" still bothers me. It is too small, or at least not high enough to be easily reachable with your thumb or index finger.
So I am trying to create a larger, clickable "read more" area. What I dont want to do is creating a huge box with an arrow on it. Rather, I would like to keep the "read more" text, but make it twice as high as a normal line of text.

I tried to use css commands to make the "read more" bigger. The downside is that the line of text in which it resides also gets bigger because of that, so that the spacing doesnt look good. Ideally, the "read more" would be twice as high as the text of the excerpt, and the excerpt would wrap around it. Any way to do that?

Could you post a link to your site so we can see what CSS might be needed?

Here it is: http://extrajournal.net

Id like to keep the >>Weiter>> (read more), but make it bigger...

I would try something like

@media only screen and (max-width: 767px) {
   a.more-link:link,
   a.more-link:visited.
   a.more-link:active {
      line-height: normal;
      font-size: 34pk;
   }
}

changing the size too what you think is appropriate

And here is some code that I came up with.

.post-footer {
    margin-top: 10px !important;
}
.more-link span {
    font-size: 1.2em;
    padding: 5px;
    top: 10px;
    position: relative;
}

You are both great! I got both versions working! But what is actually better? Is it better to have the big version active all the time (lmilesw), or go with the @media query and use it only on the small screen (juggledad)?

What do you prefer, personally? I thought I would like to just have it big enough (one size fits all). But now I am not so sure. By the way, why do you use "@media screen only" juggledad? shouldnt it be "handheld"? I dont know much about responsive design, unfortunately