abeonboard
Member-
Posts
20 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by abeonboard
-
Here below is the code that made this finally work on the live store: hdh.fi/verkkokauppa The way it works I have 1st row of 6 pictures on desktop view all .span-2. The 2nd row of 2 pictures + 4 spacers all .span-2. If one picture is not .span-2 this won't work. The best method achieve span-2 on every image is to enclose the pictures between two "line" blocks and then delete the line bloks. Above the row needs to be a spacer that is used to make this right. The second spacer between row of 6 and row of 2 I am hiding the spacer entirely, so the continuation of the list looks natural. See the picture attached why BLOCK ID + ROW .SPAN-2 is in the code. ... Breaking points I am using. @mobile: ~"only screen and (max-width: 750px)"; @tablet: ~"only screen and (min-width: 751px)"; @tablet-strict: ~"only screen and (min-width: 751px) and (max-width: 949px)"; @tablet-desktop: ~"only screen and (min-width: 751px)"; @desktop: ~"only screen and (min-width: 950px)"; @desktop-strict: ~"only screen and (min-width: 950px) and (max-width: 1199px)"; @desktop-xl: ~"only screen and (min-width: 1200px)"; Images on 3 row’s on mobile /*//////////////////////////////////// // VERKKOKAUPPA: Brand pictures .span-2 Show on mobile + 3 columns view. ////////////////////////////////////*/ /*/////////////////////////////////// // 1ST ROW: Fix spacer margin on mobile */ #block-yui_3_17_2_1_1653901313424_14498{ @media @mobile { height: 0px; margin-bottom: -15px; } } /*/////////////////////////////////// // 1ST ROW: Show .span-2 */ @media @mobile { div#block-yui_3_17_2_1_1653901313424_14498+.row .span-2 { width: 33.3333% !important; float: left !important; } /*/////////////////////////////////// // 1ST ROW: Make .span-2 3 columns on mobile */ div#block-yui_3_17_2_1_1653901313424_14498+.row .span-2:nth-child(3n+1) { clear: left !important; } /*/////////////////////////////////// // 1ST+2ND ROW: Style .span-2 padding on mobile */ div#block-yui_3_17_2_1_1653901313424_14498+.row .sqs-block, div#block-yui_3_17_2_1_1653902085842_58799+.row .sqs-block { padding-left: 10px; padding-right: 10px; padding-top: 5px !important; padding-bottom: 5px !important; } } /*/////////////////////////////////// // 2ND ROW: Show .span-2 */ @media @mobile { div#block-yui_3_17_2_1_1653902085842_58799+.row .span-2 { width: 33.3333% !important; float: left !important; } } /*/////////////////////////////////// // 2ND ROW: Hide above spacer */ #block-yui_3_17_2_1_1653902085842_58799 { display:none; }
- 2 replies
-
- mobile
- brine-template
-
(and 1 more)
Tagged with:
-
Site URL: https://www.hairdesignhelsinki.fi/verkkokauppa-testi Hi guys! How could I get these brand images to display in 3 columns on mobile? Squarespace 7.0 automatically hides span-2 columns so I gave it a width to show up again. However I can't figure out how to make them side by side? P.S. The reason I am not using the gallery option is that it is very slow to load... Regular pictures is a lot faster!
- 2 replies
-
- mobile
- brine-template
-
(and 1 more)
Tagged with:
-
Anchorlink not working with ?category= in URL?
abeonboard replied to abeonboard's topic in Customize with code
I confirmed with Squarespace Customer Support that Web APP link such as "?category=" does not work with #anchor-id. I hired someone from UpWork to fix the issue with jQuery. You can see the working function here: hdh.fi/verkkokauppa -
Site URL: https://www.hdh.fi/verkkokauppa I am using images to filter the Store by categories. The problem is that images take so much space the user won't see the filter results. I want to use an anchorlink to automatically scroll to the product results, but have hard time figuring out a solution! Would anyone know of a handy trick for this?
-
Thank you so much! @tuanphan That absolutely worked! I just wish I could make that on my own the next time but you seem to a wizard with (>.colum.row + & - 2nd child) code stuff. Do you know of any website that teaches looking into these elemnts?
-
I have this same question! @tuanphan How can I make two image blocks appear side by side on mobile? Website link: https://zarahemla.squarespace.com/ Section 4: Zarahemla in the news
-
It seemed to work just by increasing the width to 140px. Is there even a better way to do auto width for perfect row's? If not then thank you so much!! I'll try to figure out how to align center meanwhile because the width now will leave empty space to the right dpeending on the mobile phone used. Best, Abe
-
Thanks for asking! I want to translate the button to "Lisää ostoskoriin". How to that in code so I don't have to edit all the products individually and possibly miss some during the process? Thanks so much!! –Abe
-
I have this same question! I have a store with 200 products. How can I translate or hide/show the add to cart button and replace it with text "Lisää Ostoskoriin" without doing the manual work and perhaps miss some of the products? www.hdh.fi/verkkokauppa
-
I have the same question! Google Search Console can't find any CLS free url from my site 🤯 According to google squarespace does not have any good links? Not even 1.