Collection pictures need to be clicked twice on a mobile phone

Highlighted
New Member
5 0 0

I did customize the collection photos. I'm going to add the css below. I need to click twice on the collection pictures on the phone in order to follow the link.

.collection-grid {
  margin-bottom: -$gutter-site-mobile;
  overflow: auto;
  padding: 20px 20px; //edited - added
}

.collection-grid-item {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  margin-bottom: $gutter-site-mobile;
  @include media-query($medium-up) {
    margin-bottom: $grid-gutter;
  }

  
}

.collection-grid-item__title {
  color: white; //edited
  position: absolute;
  text-align: center;
  text-transform: uppercase;  //edited - added this line
  width: 100%;
  top: 85%; //edited
  padding: 0 5px;
@include transform(translateY(-50%));
  transition: $transition-link-hover;
  text-shadow: 0 0 4px $color-text-shadow;
  hyphens: auto;

  @include media-query($medium-up) {
    padding: 0 15px;
  }
  @include media-query($small) { //edited - added
    font-size: 14px;
  }
}

.collection-grid-item__link {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin-left: 12px; //edited - added margins
  margin-right: 12px; 
  margin-top: 12px;

  &:hover,
  &:focus {
    .collection-grid-item__title-wrapper::before {
      opacity: 0; //edited
    }
  }

  &:focus {
    opacity: 0; //edited
  }
}

 .collection-grid-item__link::before{ //edited - added this section
        content:'';
        position:absolute;
        border:2px solid #FA60C6  ;
        top:-5px;
        bottom: 0px;
        right:-5px;
        left:0px;
   		z-index: 3;
    }

 .collection-grid-item__link::after{ //edited - added this section
        content:'';
        position:absolute;
        border:2px solid #FA60C6;
        top:0px;
        bottom:-5px;
        right:0px;
        left:-5px;
   		z-index: 4;
    }


.collection-grid-item__overlay {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;

}

.collection-grid-item__title-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $color-image-overlay;
  opacity: 0.2;
}
0 Likes
Highlighted

Hello,

Thank you for your question.

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

I'll help you to the best of my ability.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I am currently available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
5 0 0

The url is shopgemsi.com

 

password is gemsiupworkpassword. 

the collections grid is on the homepage 

0 Likes
Highlighted
New Member
5 0 0

Hi, did you take a look?

0 Likes
Highlighted

Hello, @mirakk 

This is a bit more of a complex issue. It would require a custom solution based on top of Liquid/CSS/Javascript to implement it, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

If it is of your wish feel free to reach me out via email so we can talk about it.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I am currently available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
0 Likes