Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Portfolio two columns mobile with overlay off 7.1


Andreas_Raun

Question

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);
  }980489277_Skrmbillede2020-12-08kl_09_00_11.thumb.png.1020b18d78f6bc0622b73957e7f4dd70.png
}

Edited by Andreas_Raun
Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 pag

Posted Images

5 answers to this question

Recommended Posts

  • 0
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;
}
}

 

Link to post
  • 0

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;
}
}
 

 

Link to post
  • 0

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

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...