Project Feature Image on Mobile


#1

I am working on the following site: http://usm84.siteground.biz/~sbengine/our-projects/ and when I view the Home Page (Latest Projects) and the Projects Pages, on mobile, I notice a few issues:

  1. Image Photos don’t fill out the boxes - all images are 320 px x 220 px.
  2. I can’t see the project names when I put my finger on the image.

Can you provide any guidance?

Thank you.

Andy


#2

Hello Andy,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 500px) {
      .widget_athemes_portfolio .portfolio-item img {
        width: 100% !important;
        height: auto !important;
      }
    }

Regards,
Kharis


#3

Kharis,
That seems to have taken care of the image size, but I don’t see the project name rollover when I put my finger on the image. Is there a way to do that?

Thanks.

Andy


#4

Hello Andy,

It isn’t noticeable on touch device because hover behaviour doesn’t exist. It’s really a matter of device limitation.

Regards,
Kharis