Jump to content

One Portfolio for Desktop, One for Mobile

Recommended Posts

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? 

 

 

Link to comment
  • Replies 7
  • Views 881
  • Created
  • Last Reply
@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.

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
  • 11 months later...
  • 1 month later...
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...

Link to comment
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?

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

 

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

Archived

This topic is now archived and is closed to further replies.

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