AlexaeWittock Posted November 23, 2021 Posted November 23, 2021 Site URL: https://www.rewildoutfit.com Hi I tried all the codes you shared but nothing work... I would like to split in 2 columns my blocks text and/or pictures from my product page in mobile version to make it shorter and easier to purchase my products on the phone. Also I would like the shop bag emoticon on top of mobile version Thanks so much
Beyondspace Posted November 24, 2021 Posted November 24, 2021 12 hours ago, AlexaeWittock said: Site URL: https://www.rewildoutfit.com Hi I tried all the codes you shared but nothing work... I would like to split in 2 columns my blocks text and/or pictures from my product page in mobile version to make it shorter and easier to purchase my products on the phone. Also I would like the shop bag emoticon on top of mobile version Thanks so much Do you mean setting the layout of additional information? Making it into 2 column Something like this? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
AlexaeWittock Posted November 24, 2021 Author Posted November 24, 2021 Hi Yes exactly! But also for the whole product page so also with products title, price, quantity, shop bag, and colors next to the picture and not under Thx !
AlexaeWittock Posted November 26, 2021 Author Posted November 26, 2021 Can you please give me the coding code for that ? Hi Yes exactly! But also for the whole product page so also with products title, price, quantity, shop bag, and colors next to the picture and not under Thx !
Beyondspace Posted November 27, 2021 Posted November 27, 2021 For previous issue, you can try adding to Home > Design > Custom Css .ProductItem-additional .sqs-layout > .row > .col > .row:nth-child(2) .span-6 { width: 50% !important; float: left !important; } Let me know how it works on your site Press 👍 or mark this answer as solution to help another one too tuanphan 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Pinch/Zoom images, videos - PDFs Lightbox - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> 🤖 Ask me anything
AlexaeWittock Posted November 28, 2021 Author Posted November 28, 2021 Yes it worked thx ! And to have products title, price, quantity, shop bag, and colors next to the picture --> what is the code ? Like in laptop (see screenshot)
AlexaeWittock Posted November 28, 2021 Author Posted November 28, 2021 Also an other question I dont succeed to remove that shop bag specific icon picture that I circled in red (not the squarespace one) - Can you help me please ? thx
tuanphan Posted November 30, 2021 Posted November 30, 2021 On 11/29/2021 at 1:24 AM, AlexaeWittock said: Also an other question I dont succeed to remove that shop bag specific icon picture that I circled in red (not the squarespace one) - Can you help me please ? thx Use this CSS header#header i.fa.fa-shopping-bag { visibility: hidden; } 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!)
AlexaeWittock Posted November 30, 2021 Author Posted November 30, 2021 3 hours ago, tuanphan said: Use this CSS header#header i.fa.fa-shopping-bag { visibility: hidden; } perfect thx
AlexaeWittock Posted November 30, 2021 Author Posted November 30, 2021 On 11/28/2021 at 6:54 PM, AlexaeWittock said: Yes it worked thx ! And to have products title, price, quantity, shop bag, and colors next to the picture --> what is the code ? Like in laptop (see screenshot) Can you help with this for my mobile version please ?
tuanphan Posted December 1, 2021 Posted December 1, 2021 On 11/30/2021 at 1:47 PM, AlexaeWittock said: Can you help with this for my mobile version please ? You mean keep desktop - mobile same layout? With image on left - info on right? https://rewildoutfit.com/en/hybrid/p/borealis-admiral 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!)
AlexaeWittock Posted December 1, 2021 Author Posted December 1, 2021 6 hours ago, tuanphan said: You mean keep desktop - mobile same layout? With image on left - info on right? https://rewildoutfit.com/en/hybrid/p/borealis-admiral Yes exactly on mobile version image on left and info (product title, price, quantity, and shop) on right
tuanphan Posted December 4, 2021 Posted December 4, 2021 On 12/1/2021 at 11:13 PM, AlexaeWittock said: Yes exactly on mobile version image on left and info (product title, price, quantity, and shop) on right I think the layout won't be good. Add to Design > Custom CSS /* Mobile products */ @media screen and (max-width:767px) { .ProductItem-gallery { width: 40% !important; float: left !important; } .ProductItem .ProductItem-details { width: 60% !important; float: left !important; padding-left: 6vw !important; } .ProductItem .ProductItem-summary { flex-direction: row !important; align-items: flex-start !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!)
AlexaeWittock Posted December 4, 2021 Author Posted December 4, 2021 1 hour ago, tuanphan said: /* Mobile products */ @media screen and (max-width:767px) { .ProductItem-gallery { width: 40% !important; float: left !important; } .ProductItem .ProductItem-details { width: 60% !important; float: left !important; padding-left: 6vw !important; } .ProductItem .ProductItem-summary { flex-direction: row !important; align-items: flex-start !important; } } You are right it is not good looking ! Can you help with code to then have : 1. Title on top of the picture but the title needs to be in my police "AUDREY" 2. I want side by side "Size" and "Quantity" on the same line Thank you !
tuanphan Posted December 8, 2021 Posted December 8, 2021 (edited) On 12/4/2021 at 4:37 PM, AlexaeWittock said: You are right it is not good looking ! Can you help with code to then have : 1. Title on top of the picture but the title needs to be in my police "AUDREY" 2. I want side by side "Size" and "Quantity" on the same line Thank you ! Keep left - right layout + do these or? Edited December 8, 2021 by tuanphan 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!)
AlexaeWittock Posted December 9, 2021 Author Posted December 9, 2021 On 12/8/2021 at 11:11 AM, tuanphan said: Keep left - right layout + do these or? Like in my screenshot attached - thx
tuanphan Posted December 12, 2021 Posted December 12, 2021 On 12/9/2021 at 6:45 PM, AlexaeWittock said: Like in my screenshot attached - thx Add to Last Line in Settings > Advanced > Code injection > Footer > Then check again on real mobile <script> jQuery(document).ready(function($){ if (jQuery(window).width() < 767) { $('h1.ProductItem-details-title').insertBefore('section.ProductItem-gallery'); $('.product-quantity-input').appendTo('.product-variants'); } }); </script> <style> @media screen and (max-width:767px) { .product-variants { display: flex !important; width: 100% !important; } } </style> 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!)
AlexaeWittock Posted December 30, 2021 Author Posted December 30, 2021 Dear, I have several issues, can you help please with codes ? A. MOBILE VERSION 1) Need shop bag in bold - you cannot clearly see it now (screenshot mobile 1) 2) Need title of the product less big - in 2 lines max (screenshot mobile 1) 3) Need Quantity square bloc same size than the size square bloc for good looking (screenshot mobile 2) 4) Need Add Shop Bag in my Audrey Police (screenshot mobile 2) 5) Need under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3) 6) Need to have 3 articles next to each other line by line (screenshot mobile 4) B. LAPTOP VERSION 1) Need my police Audrey for my products titles (screenshot laptop 1) 2) Need shop bag in bold - you cannot clearly see it now (screenshot laptop 1) 3) Need all my other pages names wrote in black to be able to click and go back in other sections because like it is now we see noting as t is write in white with white color background (screenshot laptop 1) 4) Need also for laptop : under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3) 5) Need to have shop bag icon next to Shop page name (screenshot laptop 2) In advance thank you so much for your precious help !!!!! 🙂
tuanphan Posted January 1, 2022 Posted January 1, 2022 On 12/30/2021 at 6:49 PM, AlexaeWittock said: Dear, I have several issues, can you help please with codes ? A. MOBILE VERSION 1) Need shop bag in bold - you cannot clearly see it now (screenshot mobile 1) 2) Need title of the product less big - in 2 lines max (screenshot mobile 1) 3) Need Quantity square bloc same size than the size square bloc for good looking (screenshot mobile 2) 4) Need Add Shop Bag in my Audrey Police (screenshot mobile 2) 5) Need under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3) 6) Need to have 3 articles next to each other line by line (screenshot mobile 4) B. LAPTOP VERSION 1) Need my police Audrey for my products titles (screenshot laptop 1) 2) Need shop bag in bold - you cannot clearly see it now (screenshot laptop 1) 3) Need all my other pages names wrote in black to be able to click and go back in other sections because like it is now we see noting as t is write in white with white color background (screenshot laptop 1) 4) Need also for laptop : under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3) 5) Need to have shop bag icon next to Shop page name (screenshot laptop 2) In advance thank you so much for your precious help !!!!! 🙂 Mobile 1,2,3,6 Add to Design > custom CSS /* Shop bag bold */ header#header svg.icon.icon--cart { stroke-width: 3; } /* Mobile */ @media screen and (max-width:767px) { /* product titles */ h1.ProductItem-details-title { font-size: 30px; } /* quantity */ input[type="number"] { padding-bottom: 20px !important; } /* blog 2 columns */ .blog-basic-grid.collection-content-wrapper { display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 10px; } } Beyondspace 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!)
AlexaeWittock Posted January 3, 2022 Author Posted January 3, 2022 On 1/1/2022 at 10:21 AM, tuanphan said: Mobile 1,2,3,6 Add to Design > custom CSS /* Shop bag bold */ header#header svg.icon.icon--cart { stroke-width: 3; } /* Mobile */ @media screen and (max-width:767px) { /* product titles */ h1.ProductItem-details-title { font-size: 30px; } /* quantity */ input[type="number"] { padding-bottom: 20px !important; } /* blog 2 columns */ .blog-basic-grid.collection-content-wrapper { display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 10px; } } Thank you it worked ! And for Mobile 4 and 5 ? + Laptop 1, 2, 3, 4 et 5 ? THX a lot
tuanphan Posted January 4, 2022 Posted January 4, 2022 4) Need Add Shop Bag in my Audrey Police (screenshot mobile 2) I don't see the screenshot? Can you send it again? 5) Need under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3) No idea 1) Need my police Audrey for my products titles (screenshot laptop 1) You mean change logo color on product page? Add to Design > Custom CSS /* Products header */ body.collection-type-products.view-item { /* logo */ header#header img { filter: invert(1); -webkit-filter: invert(1); } header#header .header-nav-item a { color: black !important; }} 2) Need shop bag in bold - you cannot clearly see it now (screenshot laptop 1) Which pages? 3) Need all my other pages names wrote in black to be able to click and go back in other sections because like it is now we see noting as t is write in white with white color background (screenshot laptop 1) It looks like 1-3 same? 4) Need also for laptop : under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3) No idea 5) Need to have shop bag icon next to Shop page name (screenshot laptop 2) Beyondspace 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!)
AlexaeWittock Posted January 5, 2022 Author Posted January 5, 2022 19 hours ago, tuanphan said: 4) Need Add Shop Bag in my Audrey Police (screenshot mobile 2) I don't see the screenshot? Can you send it again? 5) Need under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3) No idea 1) Need my police Audrey for my products titles (screenshot laptop 1) You mean change logo color on product page? Add to Design > Custom CSS /* Products header */ body.collection-type-products.view-item { /* logo */ header#header img { filter: invert(1); -webkit-filter: invert(1); } header#header .header-nav-item a { color: black !important; }} 2) Need shop bag in bold - you cannot clearly see it now (screenshot laptop 1) Which pages? 3) Need all my other pages names wrote in black to be able to click and go back in other sections because like it is now we see noting as t is write in white with white color background (screenshot laptop 1) It looks like 1-3 same? 4) Need also for laptop : under title and price product, have the opportunity to select size, and add to shop direct with buttons without opening the product in other window (screenshot mobile 3) No idea 5) Need to have shop bag icon next to Shop page name (screenshot laptop 2) + For Mobile and Laptop version : Button" Add Shop Bag" I want it write in my Audrey Police (screenshot mobile 2 attached) + For Laptop version : For all my products, I want the titles (Legging, Tank Top, Cover Top, etc) of my products in my police Audrey for my products titles (screenshot laptop 1 attached) + For my Laptop version : You can see on the screenshot laptop 1 that the whole banner is white, so we cannot see the names (Sustainability, We Act, Shop, etc.) of my website pages (because they are wrote in white also) --> so for my products pages I would like to have those pages names link wrote in Black to be able to see them and click on them + For my Laptop and Mobile version : I want the icon "picture" of shop bag on the left (not on the right side) because it is too close of EN and FR (screenshot laptop 2)
AlexaeWittock Posted January 9, 2022 Author Posted January 9, 2022 On 1/5/2022 at 10:54 AM, AlexaeWittock said: + For Mobile and Laptop version : Button" Add Shop Bag" I want it write in my Audrey Police (screenshot mobile 2 attached) + For Laptop version : For all my products, I want the titles (Legging, Tank Top, Cover Top, etc) of my products in my police Audrey for my products titles (screenshot laptop 1 attached) + For my Laptop version : You can see on the screenshot laptop 1 that the whole banner is white, so we cannot see the names (Sustainability, We Act, Shop, etc.) of my website pages (because they are wrote in white also) --> so for my products pages I would like to have those pages names link wrote in Black to be able to see them and click on them + For my Laptop and Mobile version : I want the icon "picture" of shop bag on the left (not on the right side) because it is too close of EN and FR (screenshot laptop 2) ???
tuanphan Posted January 10, 2022 Posted January 10, 2022 20 hours ago, AlexaeWittock said: ??? You post too many questions in one post, I don't usually respond to such posts. You can post 1-2 questions in each separate topic, I believe you will get answers from some contributors. + For my Laptop and Mobile version : I want the icon "picture" of shop bag on the left (not on the right side) because it is too close of EN and FR (screenshot laptop 2) Move to (1) or (2)? + For my Laptop version : You can see on the screenshot laptop 1 that the whole banner is white, so we cannot see the names (Sustainability, We Act, Shop, etc.) of my website pages (because they are wrote in white also) --> so for my products pages I would like to have those pages names link wrote in Black to be able to see them and click on them Strange. I remember I sent code in previous comment. Have you tried it yet? /* Products header */ body.collection-type-products.view-item { /* logo */ header#header img { filter: invert(1); -webkit-filter: invert(1); } header#header .header-nav-item a { color: black !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!)
AlexaeWittock Posted January 10, 2022 Author Posted January 10, 2022 9 hours ago, tuanphan said: You post too many questions in one post, I don't usually respond to such posts. You can post 1-2 questions in each separate topic, I believe you will get answers from some contributors. + For my Laptop and Mobile version : I want the icon "picture" of shop bag on the left (not on the right side) because it is too close of EN and FR (screenshot laptop 2) Move to (1) or (2)? + For my Laptop version : You can see on the screenshot laptop 1 that the whole banner is white, so we cannot see the names (Sustainability, We Act, Shop, etc.) of my website pages (because they are wrote in white also) --> so for my products pages I would like to have those pages names link wrote in Black to be able to see them and click on them Strange. I remember I sent code in previous comment. Have you tried it yet? /* Products header */ body.collection-type-products.view-item { /* logo */ header#header img { filter: invert(1); -webkit-filter: invert(1); } header#header .header-nav-item a { color: black !important; }} Oh okay sorry... Regarding your red arrows --> Move to 2 please for laptop version + also on mobile version if he can switch place with the 2 lines (see new screenshot) YES SUPER thx it worked the code for black header !!!! 🙂
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment