Adding a Download icon to a Keyword Search

werunhsv

When I do a keyword search on my pc, I have a Free Download icon visible .
When you view the same page on a mobile device, it's not there. You have to click on the photo
then the icon appears. How can I get it on the first page, or how can I add Free Download to the
2nd page?

Hikin' Mike

It looks like you are using a logo block and using an image instead of a "fonticon". Since I don't work for SM, I don't know why it hides it like it is. If you remove your "We Run Race Photo" logo text; the logo block and the text block and add one HTML/CSS block and add this:

HTML

<div style="text-align: center;">
  <h1>We Run Race Photos</h1>
  <p class="download-icon">On a Phone? Click on the photo and then the download icon</p>
  <p>On a computer? Click on the <span class="download-icon">Free</span> Download button</p>
</div>

CSS

.download-icon::after {
  font-family: 'SmugMug Icon Font Regular';
  font-size: 24px;
  display: inline-block;
  content: '\E303 ';
  visibility: visible;
  margin-left: 5px;
}

That should display the download icon at all times.

werunhsv

That looks much better!
I did not do a good job of explaining what I am looking for.
Full screen on the pc shows the free download icon:

On the mobile it looks like this, with no icon at all, would like to have the icon and free download surrounding it, best case:

If you click on the above photo, you get this. Has the icon, but I'd like to add the free download around it, if we can't do the icon on the previous page

Hopefully this is more clear.

Hikin' Mike

You can't add a "Download" on your second image. Adding text around the icon on the third image will remove the icon.

werunhsv

I'd like to replace the icon in the 3rd photo with text, how do I do that?

Hikin' Mike

@werunhsv said:
I'd like to replace the icon in the 3rd photo with text, how do I do that?

You can't.

To add: There is only a small "window' of text...about 4 letters.

werunhsv

Go it. I think this is about as good as it gets, thanks for all your help, @Hikin' Mike !

werunhsv

If you turn the phone sideways, you can see the download button.
So maybe there is a way to do it.

Hikin' Mike

@werunhsv said:
If you turn the phone sideways, you can see the download button.
So maybe there is a way to do it.

It doesn't depend on being a mobile phone, it has to do with screen size. When the screen size is more then 736px, it will show "desktop", like your screen shot above. When the screen size is 736px or SMALLER, it shows the third image here: https://dgrin.com/discussion/comment/2120832/#Comment_2120832. Nothing you can do.