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

Show project titles under image for portfolio in mobile with grid-overlay.


DariusBo

Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0
15 hours ago, DariusBo said:

https://wolverine-lime-s87k.squarespace.com/residential

is it possible to do without code?

 

Need to custom code. All plans support code

Add to Design > Custom CSS

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 8/27/2021 at 8:52 PM, DariusBo said:

Site URL: https://wolverine-lime-s87k.squarespace.com/

The problem with grid-overlay is that you basically never see overlay on touch device - i thought maybe its possible to add a css code that enables the project title underneath the image like a regular grid-simple layout?

Password: test

Thanks a lot

Hi,

You can set overlay on desktop, title under image on mobile.

Can you share link to page where you added grid? I don't see on homepage

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
3 hours ago, tuanphan said:

Need to custom code. All plans support code

Add to Design > Custom CSS

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
}

 

amazing thank you!

Link to comment
  • 0
Posted (edited)
5 hours ago, tuanphan said:

Need to custom code. All plans support code

Add to Design > Custom CSS

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
}

 

How do i change the font size of these titles in mobile only? it seems like its using heading 3 but the codes i found in the internet does not do much.

 

Thanks

Edited by DariusBo
Link to comment
  • 0
23 hours ago, DariusBo said:

How do i change the font size of these titles in mobile only? it seems like its using heading 3 but the codes i found in the internet does not do much.

 

Thanks

try this

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
	font-size: 12px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 9/1/2021 at 12:13 PM, tuanphan said:

try this

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
	font-size: 12px !important;
}
}

I tried this for changing the font-size. But It didn't work for me. Do you know why? 🙂

 

Link to comment
  • 0
8 minutes ago, NGO2045 said:

 

Try this new code

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
.portfolio-text h3 {
	font-size: 12px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
5 hours ago, tuanphan said:

Try this new code

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}
.portfolio-text h3 {
	font-size: 12px !important;
}
}

 

Thanks a lot!! It worked fine!

 

But I'm also using another code for the portfolio grid text. So I have two text row. One for the name of the project and another one which explains the project. Like this:

Project name

Description

 

Adding the new code just changes the project name. Is it possible to also change the description text (only in the mobile version, just like project name text)

This is the code I use for it two rows in portfolio grid:

 

Name of the project <span>Logotyp</span>


.portfolio-text h3 span {
    display: block !important;
    color: #8f8f8f;
  font-family: Poppins !important;
    font-size: 18px !important;
    font-weight: 100 !important;
}

 

 

 

 

Edited by NGO2045
Link to comment
  • 0
6 hours ago, NGO2045 said:

Thanks a lot!! It worked fine!

 

But I'm also using another code for the portfolio grid text. So I have two text row. One for the name of the project and another one which explains the project. Like this:

Project name

Description

 

Adding the new code just changes the project name. Is it possible to also change the description text (only in the mobile version, just like project name text)

This is the code I use for it two rows in portfolio grid:

 

Name of the project <span>Logotyp</span>


.portfolio-text h3 span {
    display: block !important;
    color: #8f8f8f;
  font-family: Poppins !important;
    font-size: 18px !important;
    font-weight: 100 !important;
}

 

 

 

 

Use this new code

Quote

/* Portfolio Overlay to grid mobile */
@media screen and (max-width:767px) {
div#gridThumbs {
    grid-template-columns: repeat(2,1fr);
}
a.grid-item {
    height: unset !important;
    padding-bottom: 0 !important;
}
.portfolio-text {
    position: relative !important;
    opacity: 1 !important;
}

.portfolio-text h3 {
    font-size: 20px !important;
}
.portfolio-text h3 span {
    font-size: 30px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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...