FYU Posted January 20, 2021 Share Posted January 20, 2021 Site URL: https://fongyu.co Not sure if this is possible but I'd like to show the projects in a grid format instead of a list on mobile. The template is Hawley. I want to keep the current setting for desktop just want to tweak the mobile homepage. As you don't really hover when using a mobile the nice function is redundant. The current Desktop version The project layout format is set to Hover: Follow Cursor The current Mobile homepage I'd like it to be Is it possible? Please help. Thanks Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 It looks like you solved with this code? <style> .portfolio-custom { padding: 0 3vw; } .portfolio-custom a { display: block; margin-bottom: 3vw; } .portfolio-custom a img { width: 100%; } .portfolio-custom a h3 { margin-top: 0; } @media screen and (min-width: 800px) { .portfolio-custom { display: none; } } @media screen and (max-width: 800px) { .portfolio-hover { display: none; } } </style> <script src="//code.jquery.com/jquery-3.5.1.min.js"></script> <script> window.onload = function () { if (Static.SQUARESPACE_CONTEXT.collectionId == "5e8a697fd7a6d83f2f1de30e") { $portfolioHover = $(".portfolio-hover"); if ($portfolioHover.length > 0) { var images = []; $portfolioHover.find(".portfolio-hover-bg-img img").each(function () { images.push($(this).data("src")); }); $portfolioHover.parent().prepend('<div class="portfolio-custom">'); $portfolioHover.find(".portfolio-hover-item").each(function (i) { $(".portfolio-custom").append(` <a href="${$(this).attr("href")}"> <img src="${images[i]}" /> <h3>${$(this).text().trim()}</h3> </a> `); }); } } }; </script> On tablet, the text is a bit narrow. Do you want to increase width? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
JKXPVH Posted January 23, 2021 Share Posted January 23, 2021 So glad I found this post. I have exact the same issue with the same template. I wanted to integrate the code but it says ‘syntaxis error at line 5’. I’m a total noob in coding, so can anyone tell me what I do wrong? Thanks!! Link to comment
tuanphan Posted January 24, 2021 Share Posted January 24, 2021 5 hours ago, JKXPVH said: So glad I found this post. I have exact the same issue with the same template. I wanted to integrate the code but it says ‘syntaxis error at line 5’. I’m a total noob in coding, so can anyone tell me what I do wrong? Thanks!! Add to Home > Settings > Advanced > Code Injection > Header Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
JKXPVH Posted January 24, 2021 Share Posted January 24, 2021 Hmm I've tried it, no more errors but in the mobile version there's no menu anymore. The page is blank except from the header. Link to comment
tuanphan Posted February 1, 2021 Share Posted February 1, 2021 On 1/24/2021 at 6:55 AM, JKXPVH said: Hmm I've tried it, no more errors but in the mobile version there's no menu anymore. The page is blank except from the header. Can you share link to your site? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
JKXPVH Posted February 14, 2021 Share Posted February 14, 2021 Hi! I would like to solve another issue that I'm having with general project images on my homepage for the Desktop version. I started from the Hawley template and already used code (see post above) to have a different project overview on the homepage version on mobile. Right now the images are displayed perfectly how I want them on mobile > the drawings are centered and stacked: But for the Desktop version I would like to display them like this (on the right side of the navigation): Since I have to use one and the same image for both versions I'm wondering how this can be solved. Is there any code I can use for this? Would be great if someone could help me out. Thanks! Link to comment
tuanphan Posted February 15, 2021 Share Posted February 15, 2021 On 2/14/2021 at 5:08 PM, JKXPVH said: Hi! I would like to solve another issue that I'm having with general project images on my homepage for the Desktop version. I started from the Hawley template and already used code (see post above) to have a different project overview on the homepage version on mobile. Right now the images are displayed perfectly how I want them on mobile > the drawings are centered and stacked: But for the Desktop version I would like to display them like this (on the right side of the navigation): Since I have to use one and the same image for both versions I'm wondering how this can be solved. Is there any code I can use for this? Would be great if someone could help me out. Thanks! Can you share site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
JKXPVH Posted February 17, 2021 Share Posted February 17, 2021 It's already solved, thanks! Link to comment
James-Affixxius Posted October 31, 2022 Share Posted October 31, 2022 Wanting to replicate something similar to what is being described above. Is there a reason the menu items disappear when I add the above code to the website? Link to comment
James-Affixxius Posted October 31, 2022 Share Posted October 31, 2022 (edited) it seems to be the same issue you were facing here - Edited October 31, 2022 by James-Affixxius Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 On 10/31/2022 at 7:25 PM, James-Affixxius said: it seems to be the same issue you were facing here - What is your site url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment