Portfolio layout changing on mobile (CSS)

Site URL: https://butterfly-teal-tjek.squarespace.com/

Hello, I want to use hover: fixed layout of portfolio on desktop, but on mobile device I want to use grid. I saw some websites and I know its possible, but I cant make it. I dont know how. Can you help me please?

There is one website where is it working: https://fongyu.co/

My website: https://butterfly-teal-tjek.squarespace.com/

Password: chlebasmaslem

34 minutes ago, PetrKlempa said:

Site URL: https://butterfly-teal-tjek.squarespace.com/

Hello, I want to use hover: fixed layout of portfolio on desktop, but on mobile device I want to use grid. I saw some websites and I know its possible, but I cant make it. I dont know how. Can you help me please?

There is one website where is it working: https://fongyu.co/

My website: https://butterfly-teal-tjek.squarespace.com/

Password: chlebasmaslem

I suggest using portfolio page. In addition to that, we add one more section (gallery section) that can be set only display on mobile and hide in desktop

Hope it makes sense 

3 minutes ago, bangank36 said:

I suggest using portfolio page. In addition to that, we add one more section (gallery section) that can be set only display on mobile and hide in desktop

Hope it makes sense 

Take a look here: https://fongyu.co/

There is exactly what I want. There is portfolio hover: follow cursor changing on grid with mobile version.

I want portfolio based on hover: fixed changing to grid with mobile version.

Did you get an answer to this question? I really 

On 1/18/2022 at 3:39 PM, PetrKlempa said:

Take a look here: https://fongyu.co/

There is exactly what I want. There is portfolio hover: follow cursor changing on grid with mobile version.

I want portfolio based on hover: fixed changing to grid with mobile version.

Did you figure this out? I'm trying to do exactly the same thing. Thanks!

On 12/13/2022 at 10:01 PM, indierawk said:

Did you get an answer to this question? I really 

Did you figure this out? I'm trying to do exactly the same thing. Thanks!

Use this

@tuanphan I tried the link and code above and it did not work for me. It removed the entire section. I'm using portfolio grid:overlay on desktop, and would like to put the titles under the thumbnails on mobile since hover states aren't active on mobile.

www.grahamcerceo.com

On 6/2/2023 at 10:39 PM, gcerceo said:

@tuanphan I tried the link and code above and it did not work for me. It removed the entire section. I'm using portfolio grid:overlay on desktop, and would like to put the titles under the thumbnails on mobile since hover states aren't active on mobile.

www.grahamcerceo.com

Add this code to Design > Custom CSS

/* Mobile-Portfolio title under image */
@media screen and (max-width:991px) {
div#gridThumbs {
    display: block !important;
}
.portfolio-text {
    opacity: 1 !important;
    position: relative !important;
}
}

@tuanphan great! When I add the font-size CSS to .portfolio-text, the font size doesn't change for some reason, size of p2

I'm also trying to tighten it up closer to the image, the line-height is enormous, especially when the portfolio-text is smaller.

On 6/7/2023 at 7:42 AM, gcerceo said:

@tuanphan great! When I add the font-size CSS to .portfolio-text, the font size doesn't change for some reason, size of p2

I'm also trying to tighten it up closer to the image, the line-height is enormous, especially when the portfolio-text is smaller.

Use this

/* Mobile-Portfolio title under image */
@media screen and (max-width:991px) {
div#gridThumbs {
    display: block !important;
}
.portfolio-text {
    opacity: 1 !important;
    position: relative !important;
}
.portfolio-text * {
	font-size: 10px !important;
	line-height: 20px !important;
}
}