One Portfolio for Desktop, One for Mobile

Site URL: https://www.studio2299.com/recent-projects

I am trying to show one Portfolio on Desktop and another on Mobile. On Desktop, the portfolio thumbnail titles show up on mouseover. On Mobile, I need to show the portfolio thumbnails with titles.

I've seen a solution that uses Index subpages. The code is below:

" I use index pages and just hide/show the subpages, so the page URL stays the same."

/* show home page block dependent on screen size */ 
@media only screen and (max-width: 780px) { #home-banner { display: none; } } 
@media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } }

However, I'm using version 7.1, so I cannot apply that solution to my issue. Is there something similar that I can do so that the URL for the Portfolio page stays the same? 

@media screen and (max-width:767px) {
[data-section-id="abcxyztuanphan"] {
	display: none;
}
}
@media screen and (min-width:768px) {
[data-section-id="abcxyztuanphan123"] {
	display: none;
}
}

Create 2 sections, each section has specific ID.

Hi @tuanphan

I'm a little confused about your suggestion. How do you create a portfolio page with two sections (two sets of portfolios)?

hi @tuanphan!

I'm trying to do the same thing, I'd like to have the hover:background portfolio layout on desktop, and the grid: simple on mobile.

Is that possible?

On 5/1/2020 at 6:15 PM, tuanphan said:

@media screen and (max-width:767px) {
[data-section-id="abcxyztuanphan"] {
	display: none;
}
}
@media screen and (min-width:768px) {
[data-section-id="abcxyztuanphan123"] {
	display: none;
}
}

Create 2 sections, each section has specific ID.

Hi @tuanphan!

This code was super helpful! I used it to create a separate gallery section to display on mobile, so I'll be able to have more control over the mobile arrangement.

However, with this, I lost the padding for the header on mobile! Would you know some code to just shift the images of the section down? (see the mobile version of this page: https://www.andrewjchristensen.com/drawings). I tried adding a blank section above it, but it messes up the scale of the background image... I'd rather the background of the gallery section continue through the header continuously, hence just needing to shift the images down.

*Little update: I tried adding this code, but it only moved the entire section down, leaving the header space empty/white.

Quote

@media screen and (max-width:767px) {
[data-section-id="609d305aa07aef53b13b715b"] {
    margin-top: 50px;
}
}

I'm hoping to keep the background of the section extended all the way to the top. I don't really know code, I'm just finding bits here and there and assembling them mimicking the sequences I've seen...

On 4/5/2021 at 11:02 PM, casafloralia said:

hi @tuanphan!

I'm trying to do the same thing, I'd like to have the hover:background portfolio layout on desktop, and the grid: simple on mobile.

Is that possible?

Yes. Possible. Do you still need help on this?

On 5/19/2021 at 7:32 PM, achristensen said:

Hi @tuanphan!

This code was super helpful! I used it to create a separate gallery section to display on mobile, so I'll be able to have more control over the mobile arrangement.

However, with this, I lost the padding for the header on mobile! Would you know some code to just shift the images of the section down? (see the mobile version of this page: https://www.andrewjchristensen.com/drawings). I tried adding a blank section above it, but it messes up the scale of the background image... I'd rather the background of the gallery section continue through the header continuously, hence just needing to shift the images down.

*Little update: I tried adding this code, but it only moved the entire section down, leaving the header space empty/white.

I'm hoping to keep the background of the section extended all the way to the top. I don't really know code, I'm just finding bits here and there and assembling them mimicking the sequences I've seen...

Add to Design > Custom CSS

/* Mobile gallery padding - drawings */
@media screen and (max-width:767px) {
[data-section-id="609d305aa07aef53b13b715b"] .gallery-grid.gallery-grid--layout-grid {
    padding-top: 40vw;
}
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile gallery padding - drawings */
@media screen and (max-width:767px) {
[data-section-id="609d305aa07aef53b13b715b"] .gallery-grid.gallery-grid--layout-grid {
    padding-top: 40vw;
}
}

 

Thank you so much @tuanphan! I appreciate it greatly!