tuanphan Posted June 14, 2021 Share Posted June 14, 2021 On 6/13/2021 at 4:47 AM, s7udiostars said: Hey Tuanphan. I have tried to add this, but it have not worked, can you maybe guide me? my website is https://www.s7udiostars.com/ 🙂 Hi. You mean 9 poster blocks on homepage? Make them 2 items/row on mobile? 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
s7udiostars Posted June 14, 2021 Share Posted June 14, 2021 yes, that is what im loking for 🙂 Link to comment
tuanphan Posted June 15, 2021 Share Posted June 15, 2021 22 hours ago, s7udiostars said: yes, that is what im loking for 🙂 Add this to Settings > Advanced > Code Injection > Footer >> Then save & check on real mobile <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ if (jQuery(window).width() < 767) { $('div#page-section-6058d2ded607a06ccc5e14c8 .span-4:first-child').insertAfter('div#page-section-6058c92dd9372926209ce60b .span-4:nth-child(3)'); } }); </script> <style> @media screen and (max-width:767px) { div#page-section-6058c92dd9372926209ce60b .span-4, div#page-section-605906607b4d59585583ac12 .span-4 { width: 50% !important; float: left !important; } div#page-section-6058c92dd9372926209ce60b .span-4:nth-child(2n+1) { clear: left !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!) Link to comment
s7udiostars Posted June 15, 2021 Share Posted June 15, 2021 5 hours ago, tuanphan said: Add this to Settings > Advanced > Code Injection > Footer >> Then save & check on real mobile <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ if (jQuery(window).width() < 767) { $('div#page-section-6058d2ded607a06ccc5e14c8 .span-4:first-child').insertAfter('div#page-section-6058c92dd9372926209ce60b .span-4:nth-child(3)'); } }); </script> <style> @media screen and (max-width:767px) { div#page-section-6058c92dd9372926209ce60b .span-4, div#page-section-605906607b4d59585583ac12 .span-4 { width: 50% !important; float: left !important; } div#page-section-6058c92dd9372926209ce60b .span-4:nth-child(2n+1) { clear: left !important; } } </style> Thank you, it helped. but some of the pictures are not getting smaller / side by side. and the text is cramping up, is there are possiblity to get all of them small? thank you so much! Link to comment
tuanphan Posted June 16, 2021 Share Posted June 16, 2021 19 hours ago, s7udiostars said: Thank you, it helped. but some of the pictures are not getting smaller / side by side. and the text is cramping up, is there are possiblity to get all of them small? thank you so much! Don't remove any code. Add this to Design > Custom CSS @media screen and (max-width:767px) { div#page-section-6058d2ded607a06ccc5e14c8 .span-4 { width: 50% !important; float: left !important; } body.homepage .design-layout-poster * { font-size: 14px; } } 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
s7udiostars Posted June 16, 2021 Share Posted June 16, 2021 1 hour ago, tuanphan said: Don't remove any code. Add this to Design > Custom CSS @media screen and (max-width:767px) { div#page-section-6058d2ded607a06ccc5e14c8 .span-4 { width: 50% !important; float: left !important; } body.homepage .design-layout-poster * { font-size: 14px; } } you are truly amazing! Thank you so much! Link to comment
tuanphan Posted June 24, 2021 Share Posted June 24, 2021 On 6/16/2021 at 5:24 PM, s7udiostars said: you are truly amazing! Thank you so much! Do you want fix these? Site URL – https://www.s7udiostars.com/ 1. (Mobile-Footer) Center all elements in footer? 2. (Tablet-Homepage) Reduce text size? 3. (Tablet-Header) Align social – menu? 4. (Mobile-Shop) Change category links to 2/3 lines, instead of scrollbar 5. (Mobile-Products) Change related products to 2 items/row? 6. (Mobile-Products) Change related products to 2 items/row? 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
Esoes_design Posted July 28, 2021 Share Posted July 28, 2021 Hi @tuanphan I have a similar problem with two images. I would like to put the two images (in green) the same (side by side) in the mobile view. Do you have a code for this ? https://wisteria-pomegranate-drf5.squarespace.com Pass : Esoes Thanks for your precious help !! Link to comment
tuanphan Posted July 29, 2021 Share Posted July 29, 2021 20 hours ago, Esoes_design said: Hi @tuanphan I have a similar problem with two images. I would like to put the two images (in green) the same (side by side) in the mobile view. Do you have a code for this ? https://wisteria-pomegranate-drf5.squarespace.com Pass : Esoes Thanks for your precious help !! Add to Design > Custom CSS /* Images side by side */ @media screen and (max-width:767px) { div#page-section-60a1058008554025bfaa5109 .span-7 .span-5>.row:first-child { display: flex; flex-wrap: nowrap !important; flex-direction: row !important; } div#page-section-60a1058008554025bfaa5109 .span-7 .span-5>.row:first-child>.col { width: 50% !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
Ally09 Posted August 12, 2021 Share Posted August 12, 2021 On 12/14/2020 at 11:53 PM, TOMweb said: Add to Design > Custom CSS @media screen and (max-width:767px) { div#page-section-YOURSECTIONID>.row>.col>.row>.col { width: 50% !important; float: left !important; } } 🙂 Hello! This code worked perfectly for me but I just have a slight problem. I have 5 images in my desktop view and I wanted it to be viewed as 2-2-1 per row but when I applied this code, the 2nd line only has 1 image and the third one has two but I wanted it the other way around. If you could reply to this, it would be much appreciated. Thank you! Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 On 8/12/2021 at 8:57 AM, Ally09 said: Hello! This code worked perfectly for me but I just have a slight problem. I have 5 images in my desktop view and I wanted it to be viewed as 2-2-1 per row but when I applied this code, the 2nd line only has 1 image and the third one has two but I wanted it the other way around. If you could reply to this, it would be much appreciated. Thank you! Hi. Can you share link to page where you have problem? We can check easier 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
Ally09 Posted August 15, 2021 Share Posted August 15, 2021 On 8/14/2021 at 2:55 PM, tuanphan said: Hi. Can you share link to page where you have problem? We can check easier Hello! I this is my client's account and it is not published yet so I don't know how I'm supposed to show you. Link to comment
tuanphan Posted August 16, 2021 Share Posted August 16, 2021 21 hours ago, Ally09 said: Hello! I this is my client's account and it is not published yet so I don't know how I'm supposed to show you. If your site is private/ trial, you can setup password & share url 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
chrisshaddock Posted September 13, 2021 Share Posted September 13, 2021 I need to piggy-back on this thread and ask for help. I have sections that hide in mobile view and a section the reveals in mobile view. In the section that reveals in mobile view I am also trying to have 2 images side x side. I found the script in the thread but have since made an update and now hold of the images do it. The page is https://www.10peaks.ca/10pix-speakers The code I am using is /* Mobile - Speakers side x side */ @media screen and (max-width:767px) { div#page-section-6131314e8395b25bc06cc9ba>.row>.col> { width: 50% !important; float: left !important; } } I am hoping @tuanphan or someone can help. Link to comment
tuanphan Posted September 16, 2021 Share Posted September 16, 2021 On 9/14/2021 at 2:03 AM, chrisshaddock said: I need to piggy-back on this thread and ask for help. I have sections that hide in mobile view and a section the reveals in mobile view. In the section that reveals in mobile view I am also trying to have 2 images side x side. I found the script in the thread but have since made an update and now hold of the images do it. The page is https://www.10peaks.ca/10pix-speakers The code I am using is /* Mobile - Speakers side x side */ @media screen and (max-width:767px) { div#page-section-6131314e8395b25bc06cc9ba>.row>.col> { width: 50% !important; float: left !important; } } I am hoping @tuanphan or someone can help. Hi, Which section are you referring to? Can you take a screenshot? We can check easier 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
s7udiostars Posted September 19, 2021 Share Posted September 19, 2021 On 6/24/2021 at 10:55 AM, tuanphan said: Do you want fix these? Site URL – https://www.s7udiostars.com/ 1. (Mobile-Footer) Center all elements in footer? 2. (Tablet-Homepage) Reduce text size? 3. (Tablet-Header) Align social – menu? 4. (Mobile-Shop) Change category links to 2/3 lines, instead of scrollbar 5. (Mobile-Products) Change related products to 2 items/row? 6. (Mobile-Products) Change related products to 2 items/row? Hi there! that would be amazing, thank you i appriciate it a lot! i actually first now have been able to find this again, as i wanted to ask you about those things :) Link to comment
tuanphan Posted September 20, 2021 Share Posted September 20, 2021 On 9/19/2021 at 7:11 PM, s7udiostars said: Hi there! that would be amazing, thank you i appriciate it a lot! i actually first now have been able to find this again, as i wanted to ask you about those things :) #1. Add to Design > Custom CSS. If it works, I will continue checking other problems /* Mobile center footer */ @media screen and (max-width:767px) { footer.sections * { text-align: center !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
Anele0610 Posted October 8, 2021 Share Posted October 8, 2021 Hey @tuanphan! I've used this code: /* Posters side by side */ @media screen and (max-width:767px) { div#page-section-614f4c5d0d9cbb50826dbe97 .span-2 .image-block { width: 20% !important; float: left !important; padding: 20px !important; clear: none !important; } div#page-section-614f4c5d0d9cbb50826dbe97 .span-4 .image-block:nth-child(2n+1) { clear: left !important; } } and it worked on my mobile footer for social icons, however, the two bottom icons are now NOT clickable, even though they must be, and the two top ones are fine. Can you help? 🙂 Link: https://bird-apricots-y5tt.squarespace.com/ passw: 123squarespace Thanks! Link to comment
tuanphan Posted October 10, 2021 Share Posted October 10, 2021 On 10/8/2021 at 6:35 PM, Anele0610 said: Hey @tuanphan! I've used this code: /* Posters side by side */ @media screen and (max-width:767px) { div#page-section-614f4c5d0d9cbb50826dbe97 .span-2 .image-block { width: 20% !important; float: left !important; padding: 20px !important; clear: none !important; } div#page-section-614f4c5d0d9cbb50826dbe97 .span-4 .image-block:nth-child(2n+1) { clear: left !important; } } and it worked on my mobile footer for social icons, however, the two bottom icons are now NOT clickable, even though they must be, and the two top ones are fine. Can you help? 🙂 Link: https://bird-apricots-y5tt.squarespace.com/ passw: 123squarespace Thanks! Don't remove above code. Add this to Design > Custom CSS div#block-yui_3_17_2_1_1633085901839_31678 { clear: left !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
Anele0610 Posted October 11, 2021 Share Posted October 11, 2021 @tuanphan Thanks, works like a charm 🙂 Link to comment
s7udiostars Posted October 14, 2021 Share Posted October 14, 2021 On 9/20/2021 at 2:50 PM, tuanphan said: #1. Add to Design > Custom CSS. If it works, I will continue checking other problems /* Mobile center footer */ @media screen and (max-width:767px) { footer.sections * { text-align: center !important; } } @tuanphan #1 did work, and looks super good, thank you! I am exited about the other codes 🙂 Link to comment
tuanphan Posted October 15, 2021 Share Posted October 15, 2021 20 hours ago, s7udiostars said: @tuanphan #1 did work, and looks super good, thank you! I am exited about the other codes 🙂 #2. It looks like you changed text & solved? #3, #4. Use this CSS /* tablet align menu social */ @media screen and (max-width:991px) and (min-width:768px) { .header-menu-actions { margin-left: 7vw; } } /* Mobile */ @media screen and (max-width:767px) { /* Shop page category links */ ul.nested-category-children { flex-wrap: wrap !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
s7udiostars Posted October 15, 2021 Share Posted October 15, 2021 1 hour ago, tuanphan said: #2. It looks like you changed text & solved? #3, #4. Use this CSS /* tablet align menu social */ @media screen and (max-width:991px) and (min-width:768px) { .header-menu-actions { margin-left: 7vw; } } /* Mobile */ @media screen and (max-width:767px) { /* Shop page category links */ ul.nested-category-children { flex-wrap: wrap !important; } } @tuanphan I dont think i have changed text? But #3 and #4 looks good now ! thank you :)! Link to comment
Esoes_design Posted October 16, 2021 Share Posted October 16, 2021 Hi @tuanphan Still have the same problem with the page services below : https://wisteria-pomegranate-drf5.squarespace.com/services Pass : Esoes Here is the code I Used : /* Images side by side */ @media screen and (max-width:767px) { div#page-section-60a16b3a6bbf946c5d043b2e .span-7 .span-5>.row:first-child { display: flex; flex-wrap: nowrap !important; flex-direction: row !important; } div#page-section-60a16b3a6bbf946c5d043b2e .span-7 .span-5>.row:first-child>.col { width: 50% !important; } } Thanks for your help ! Link to comment
tuanphan Posted October 18, 2021 Share Posted October 18, 2021 On 10/17/2021 at 2:47 AM, Esoes_design said: Hi @tuanphan Still have the same problem with the page services below : https://wisteria-pomegranate-drf5.squarespace.com/services Pass : Esoes Here is the code I Used : /* Images side by side */ @media screen and (max-width:767px) { div#page-section-60a16b3a6bbf946c5d043b2e .span-7 .span-5>.row:first-child { display: flex; flex-wrap: nowrap !important; flex-direction: row !important; } div#page-section-60a16b3a6bbf946c5d043b2e .span-7 .span-5>.row:first-child>.col { width: 50% !important; } } Thanks for your help ! Can you describe again the problem? Thank you 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment