Dominique_48

thanks again. I would really like the line block option to work but the line gets cut into 3 according to columns , I am not able to get one line to go all the way across.

Would it be possible for my homepage to have two display options ie if your screen size is large (desktop) show x if your screen space is small (mobile) show y? How do I tag these two options so that it automatically shows the right one? In large view I will have 3 columns, 3 rows. In small I want to manually reconfigure so I have one column and 7 rows with display order that I can set.

I have tried line block, once all 3 images are in line then the line block breaks up into 3 sections and I cannot override it. It does not help order display on mobile. Any other ideas re display order on mobile? Many thanks.

thank you so much, will give it a go.

Thanks. 53!Stock is password

Site URL: https://blenny-bluebird-terj.squarespace.com/config/design/custom-css I have created code blocks with image hover and link to second page for 7 art prints. On desktop they are displaying correctly from left to right eg 1, 2, 3. On mobile, they follow in built squarespace order which seems to go from top to bottom eg 1, 4 ,2, 5. The code at bottom in blue is where I have tried to use flex wrap and order value to affect order display on mobile but it has not worked. Any help would be greatly appreciated. Many thanks. } #img-hover-one{ background-image:url('https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61e72dc9c78a8405d7deee0f/1642540493980/KHXBendOneCrop.png'); height:20.8vw; width:28.1vw; background-size:contain;} #img-hover-one:hover{ background-image:url('https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61dc4285b981d80d59ca18bc/1641824912750/KHXBendOneShineCropLH.png') } <a href="/bend-one"> <div id="img-hover-one"></div> <div class=figure> <p>Bend One </div> #page-section-61dc9320e7386f52677ca8df { display: flex; flex-direction: column; flex-wrap: wrap; } /* @media screen and (max-width: 768px) { display: flex; flex-flow: row wrap; } .image-hover-one { order: 1 } .image-hover-two { order: 2 } .image-hover-three { order: 3 } .image-hover-four { order: 4 } .image-hover-five { order: 5 } .image-hover-six {order: 6} }*/

I am using this custom css plus code block <div id="img-hover"></div> and would like to slow speed so it doesn't jump so quickly from first image to second image. Any help would be much appreciated. #img-hover{ background-image:url('https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd953e537667a78e5a6bb/1640880473238/Katy+Hepburn_1SSBend1.png'); height:21vw; width:29vw; background-size:contain;} #img-hover:hover{ background-image:url('https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd97310a48011dfc6d8f4/1640880518189/KH+Bend+One+shine+image+1.png') }

Thank you very much. Yes, previously I created code in code block which worked with image hover but then I did not know how to add click through to second page. I found similar question in a forum where answer suggested no code block was required, see below - _ _ _ I want to have an image on my website that changes when you hover over it and you can click which sends you to another page on the website. I haven't been able to find this anywhere, maybe I'm just not asking the right question? Here is the code I have so far which works for the hover image change, but I can't figure out how to make it clickable and redirect. "<img src="Original-Image.pmg" onmouseover="this.src='second-image.png'" onmouseout="this.src='Original-Image.png'">" Thanks for your help! Tuanphan reply – 7 Jan 2020 No need to use Code Block. First add Image Block Next, upload image Next, add link Next, use CSS to change image on hover _ _ _ _ _ _ _ _ Should I revert to code block which works for image hover but then how do I make it possible to click on image and be taken to a second page on the website? Thanks again.

My image is in an image block (not a code block) and clicks through to second page successfully. But I would like original image to hover on to second image as well as clicking thro' to second page. This is code I have entered but it brings up syntax error referencing <img line. Any help would be much appreciated. Thank you. <img src="https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd953e537667a78e5a6bb/1640880473238/Katy+Hepburn_1SSBend1.png" onmouseover="this.src=https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd97310a48011dfc6d8f4/1640880518189/KH+Bend+One+shine+image+1.png" onmouseout="this.src=https://static1.squarespace.com/static/61cb2383021d34467e693bf6/t/61cdd953e537667a78e5a6bb/1640880473238/Katy+Hepburn_1SSBend1.png" >