How would you have a bigger Read More look like?
 

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
changing the size too what you think is appropriate

And here is some code that I came up with.

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

the one you and/or your users like

that's what I've seen used.

Im still thinking about the right way to go about this... but I figured out why you shouldnt use "handheld" with @media

I dont recall the website now, but I read that "handheld" actually is the proper css tag for indicating content that should be displayed by handhelds... but the iphone, modern tablets etc. all ignore it and go with "screen" instead... so "handheld" is just an ignored standard sigh :-)

OK, I have come up with a solution I like: Depending on the browser size it switches to a large grey bar containing the read more.

Code is as follows:


@media only screen and (max-width: 1000px) {
.post-footer {
margin-top: 10px !important;
}
.more-link span {
font-size: 1.2em;
display: block;
height: 100%;
width: 94%;
padding: 10px;
top: 5px;
position: relative;
}
}


So I am simply using "display: block" to fill the entire available space from left to right. Hope thats ok... it seems to work, at least. It seems better than to just make the read more bigger.

Now I just have one thing I would like to do: I would like to change the way the images are displayed. To be exact, I would like to have them come before the text of the excerpt (and not to the left of it). Can this be achieved with CSS? I dont seem to figure out which handle or hook I have to use...

do you mean you want the thumbnail to show then a newline where the excerpt will start?
as opposed to the thumbnail on the left with the test starting at the top right ofthe image and wrapping around it (if there is more text than the height of the image)

if you want the first case I think you are going to have to edit the theme code unless you can find a plugin that will do it for you..

Actually I thought you could just define a large padding to the right and left with css. or set the size as 100% so that the image would fill the available width of the main column, then the text would follow below it.

Basically similar to your example, juggledad, but with images, not text. I am not working with thumbnails, but just placing the image as the very first element of a post, so it should be easy, actually

Im still not very good with css, but maybe it would be something like

img {size: 100%}

or

img {
padding-left: 50px;
padding-right: 50px;

or something similar

when you add the image to the post, try selecting 'full-size'

What I would like to do is influence the images with css, but only if screen size is below 1000, so that I can go with your solution, juggledad.

At this point, I am trying "clear: both;" applied to .post img and .wp-caption to forbid other elements from floating around it. That should put the text of the excerpt below the image, if the screen is small i.e. if used on a handheld. Using the firefox inspector, it seems that the css is actually applied to the right elements, but it doesnt do anything (you can check at my site).

Full code looks like this at the moment:

@media only screen and (max-width: 1000px) {
.post img {
clear: both;
}
.wp-caption {
clear: both;
}
.post-footer {
margin-top: 10px !important;
}
.more-link span {
font-size: 1.2em;
display: block;
height: 100%;
width: 94%;
padding: 10px;
top: 5px;
position: relative;
}
}

Argh, I figured it out myself. Only I dont know why it works :-(

In any case, it works if you apply the "clear: both" not to the images, but to the text of the excerpt. So I am using this now, and it works:

div.post-bodycopy p {
clear: both;
}