Portfolio two columns mobile with overlay off 7.1

Hey

as the title says. i have been trying to get my portfolio front page to show my projektes in 2 columns. i made it so fare, but now the title seem to not want to follow the image. + the text is to big now so i need to make it a bit smaller to. 

The projekt is made with overlay on and i think what is the problem.

Any help??  

/* 2 Column Portfolio Grid */
@media only screen and (max-width:640px) {
.portfolio-grid-overlay {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.portfolio-grid-overlay .grid-item {
width: 40%;
}
}

.tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {
      opacity: 1 !important;
      transition: unset !important;
}

.gridThumbs {
    opacity: 1 !important;
      transition: unset !important;
}

.portfolio-title {
  text-shadow:0px 1px 20px black;
}

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1 !important;
  }
  .portfolio-grid-overlay .grid-item .portfolio-title {
      transition: none !important;
      transform: translateY(0);
  }
}

Hi. Can you share link to portfolio page? We can help easier

iris-wolf-m28e.squarespace.com/
code: 12345

On 12/10/2020 at 5:58 PM, Andreas_Raun said:

iris-wolf-m28e.squarespace.com/
code: 12345

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}

hey i do not work sadly, stuff is still off and text is not on point with image. 
 

/* 2 Column Portfolio Grid */
@media only screen and (max-width:640px) {
.portfolio-grid-overlay {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.portfolio-grid-overlay .grid-item {
width: 40%;
}
}

.tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {
      opacity: 1 !important;
      transition: unset !important;
}

.gridThumbs {
    opacity: 1 !important;
      transition: unset !important;
}

.portfolio-title {
  text-shadow:0px 1px 20px black;
}

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1 !important;
  }
  .portfolio-grid-overlay .grid-item .portfolio-title {
      transition: none !important;
      transform: translateY(0);
  }

#wm-slider-container section {
    /*change the "1" to however many seconds you'd like the transition to take*/
  transition: all 1s ease-in-out !important;
  }

.tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {
      opacity: 1 !important;
      transition: unset !important;
}

.gridThumbs {
    opacity: 1 !important;
      transition: unset !important;
}

.portfolio-title {
  text-shadow:0px 1px 20px black;
}

@media screen and (max-width:640px) {
  .portfolio-grid-overlay .grid-item .portfolio-text {
    opacity: 1 !important;
  }
  .portfolio-grid-overlay .grid-item .portfolio-title {
      transition: none !important;
      transform: translateY(0);
  }
}
  }
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}
 

It looks fine here. DId you solve?

Also I see you haven't changed SEO Title, so browser tab name still shows "Gallery 1"

https://iris-wolf-m28e.squarespace.com/color

Similar on this page https://iris-wolf-m28e.squarespace.com/people