Jump to content

Portfolio two columns mobile with overlay off 7.1

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

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 comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.