ggimishev Posted January 15 Share Posted January 15 Hello all, could you please suggest how can I create a home page like this one - shortstache.com/ Currently the rasterizing is all over the place in both the desktop and the mobile version. There is also white space on the left and right of the gallery slideshow that should be removed. desktop version: mobile version: And this is all of the CSS right now: /* portfolio 1 column */ div#gridThumbs { grid-template-columns: repeat(1,1fr) !important; } /* Portfolio fullbleed */ div#gridThumbs { padding-left: 0; padding-right: 0; } #collection-65a537c5265f9c55109d148a header {display:none} @font-face {font-family:Axiforma; src:url(https://static1.squarespace.com/static/65a4f0d085c986465cc1e281/t/65a52617eafaaf12089895d3/1705322007505/Axiforma-Regular.ttf) } #collection-65a537c5265f9c55109d148a footer {display:none} //DESKTOP// .header-nav-item a { font-family: 'Axiforma'; } .header-title-text { font-family:Axiforma; } //---Custom Fonts--- h1, h2, h3, h4, h5, p, {font-family:Axiforma} //HOME @media only screen and (min-width: 641px) { #collection-65a537c5265f9c55109d148a { #page .page-section:nth-of-type(1) { /*second second on the left*/ width: 50%; min-height: 80vh; align-items: center; float: left; } #page .page-section:nth-of-type(2) { /*third section on the right*/ width: 50%; min-height: 80vh; align-items: center; } #page .page-section:nth-of-type(3) { /* forth section full width again */ clear: both; } } } @media screen and (min-width:960px) { body#collection-65a537c5265f9c55109d148a { #content figure { height: 100vh !important; } & { overflow: hidden; } img { top: 0 !important; } .content-fill, .image-inset { overflow: visible !important; height: 100% !important; padding-bottom: 150% !Important; } }} .gallery-slideshow { padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; } .gallery-slideshow { padding: 0px !important; } Thank you very much in advance. Link to comment
tuanphan Posted January 16 Share Posted January 16 You can add 2 sections Top is Gallery Section Slideshow Second is a standard section then share link to your site, we can give code to make both side by side ggimishev 1 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
ggimishev Posted January 16 Author Share Posted January 16 4 hours ago, tuanphan said: You can add 2 sections Top is Gallery Section Slideshow Second is a standard section then share link to your site, we can give code to make both side by side I managed to do that with a tutorial already. Could you please suggest how can I make this portfolio section - www.wolk.studio/professional look like this one - shortstache.com/professional First I need to resize just the mobile version to look like his mobile version. I managed to resize just the desktop version. Then I need to have this brightness reducing effect when hovering over the portfolio project. I also saw that when you are hovering on the mobile version there are no project titles. I need to add them too. I will be very thankful id you can help me with those changes. Thank you in advance. Link to comment
tuanphan Posted January 18 Share Posted January 18 Use this code to Custom CSS @media screen and (max-width:767px) { a.grid-item, .grid-image { padding-bottom: 30vh !important; } a.grid-item:hover .portfolio-text, a.grid-item:hover h3 { opacity: 1 !important; } a.grid-item:hover .portfolio-overlay { opacity: 1 !important; background-color: rgba(0,0,0,0.5) !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
ggimishev Posted January 18 Author Share Posted January 18 21 minutes ago, tuanphan said: Use this code to Custom CSS @media screen and (max-width:767px) { a.grid-item, .grid-image { padding-bottom: 30vh !important; } a.grid-item:hover .portfolio-text, a.grid-item:hover h3 { opacity: 1 !important; } a.grid-item:hover .portfolio-overlay { opacity: 1 !important; background-color: rgba(0,0,0,0.5) !important; } } @tuanphan Thank you very much, but it didn't help with the hover effect on the mobile version when you are viewing from a mobile device. Check https://www.shortstache.com/professional on your mobile device, please. Is there a way to make like in the example - on the first touch the hover effect and the title appear and on the second touch of the screen you will enter the specific portfolio project? Link to comment
tuanphan Posted January 20 Share Posted January 20 On 1/18/2024 at 4:10 PM, ggimishev said: @tuanphan Thank you very much, but it didn't help with the hover effect on the mobile version when you are viewing from a mobile device. Check https://www.shortstache.com/professional on your mobile device, please. Is there a way to make like in the example - on the first touch the hover effect and the title appear and on the second touch of the screen you will enter the specific portfolio project? I think it requires JavaScript code, I don't know this, you try creating new thread 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 ggimishev Posted January 22 Author Solution Share Posted January 22 Here is how to do it: <script> document.addEventListener("touchstart", function(){}, true); </script> tuanphan 1 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