Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 11/21/2022 at 2:30 AM, Emmapartridge said:

Hi, i am also trying to organise the portfolio grid overlay text on two lines. First line 12pt, second line 9pt.

 

Your post is the closest I have got but still doesn't work. I've been trying for hours now

 

Can you help please. www.emmapartridge.co.uk

See #2

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/23/2022 at 6:46 PM, Emmapartridge said:

Hello Thank you answering but what I needed wasn't there.

  • I want the overlay titles on the portfolio home page images to be on two lines and aligned left
  • I want the text white, overlay black
  • I want the top line text bigger than the bottom. 

Thanks

portfolio.jpg

You can use that code to add 2 lines, then we can adjust to make text float to left + change text style + add overlay

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.