tuanphan Posted August 12, 2020 Share Posted August 12, 2020 On 8/10/2020 at 10:54 PM, serenamnixon said: Yep--https://sparrow-plums-s25x.squarespace.com/blog-posts I have these links on the main blog home page (recent) and then clicking on each image block filters posts under that category, so I want to make sure that in mobile view the three image blocks are in one row on both the main blog page and the filtered blog pages. Does that make sense? Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#page-section-5f304a27476fd6536aa57bbf .span-4 { width: 33.33% !important; float: 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
serenamnixon Posted August 12, 2020 Share Posted August 12, 2020 2 hours ago, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#page-section-5f304a27476fd6536aa57bbf .span-4 { width: 33.33% !important; float: left !important; } } Thank you soooooo much! Link to comment
Guest Posted August 20, 2020 Share Posted August 20, 2020 Hi @tuanphan I'm having a similar issue and wondered if you could help. Tried all the codes in this thread but nothing seems to be working. I have a row of 4 logos at the bottom of my home page that I would like displayed as 2 columns on mobile: www.mieloandco.com Any insight would be appreciated!! Link to comment
tuanphan Posted August 20, 2020 Share Posted August 20, 2020 1 hour ago, meljthompson said: Hi @tuanphan I'm having a similar issue and wondered if you could help. Tried all the codes in this thread but nothing seems to be working. I have a row of 4 logos at the bottom of my home page that I would like displayed as 2 columns on mobile: www.mieloandco.com Any insight would be appreciated!! You can't do this with your layout, you need to rearrange the columns a bit, which is difficult to explain. Another solution is to use Summary Block or Gallery, then I will give the code 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
Guest Posted August 24, 2020 Share Posted August 24, 2020 Hi @tuanphan I changed to a gallery instead and that seems to have done the trick! Thanks for your help. Link to comment
Guest Posted November 4, 2020 Share Posted November 4, 2020 On 8/12/2020 at 9:27 AM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#page-section-5f304a27476fd6536aa57bbf .span-4 { width: 33.33% !important; float: left !important; } } Hi Tuanphan, I tried some tweaking of the code you provided in this thread but no luck. I am hoping you could assist yet again! I am trying to have the three (3) side-by-side podcast buttons not stack on mobile. http://www.takebackyourcareerpodcast.com password: boots135 Thank you! Link to comment
tuanphan Posted November 6, 2020 Share Posted November 6, 2020 On 11/5/2020 at 1:24 AM, gogreenmsu said: Hi Tuanphan, I tried some tweaking of the code you provided in this thread but no luck. I am hoping you could assist yet again! I am trying to have the three (3) side-by-side podcast buttons not stack on mobile. http://www.takebackyourcareerpodcast.com password: boots135 Thank you! Use this new code @media screen and (max-width:767px) { div#page-section-5fa4b44a989a223ad30acbe7 .span-12 .span-4 { width: 33.33% !important; float: left !important; } div#page-section-5fa4b44a989a223ad30acbe7 .span-12 .span-4 .image-block { padding: 5px; } } 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
Guest Posted November 6, 2020 Share Posted November 6, 2020 2 hours ago, tuanphan said: Use this new code @media screen and (max-width:767px) { div#page-section-5fa4b44a989a223ad30acbe7 .span-12 .span-4 { width: 33.33% !important; float: left !important; } div#page-section-5fa4b44a989a223ad30acbe7 .span-12 .span-4 .image-block { padding: 5px; } } Worked perfectly; thank you very much! Link to comment
Guest Posted November 13, 2020 Share Posted November 13, 2020 I was super excited when I found this thread as I'm trying to do the same thing. Does this code work with 7.1 sites? I've tried every suggestion on the thread to no avail 😞 I'd be hugely grateful for any advice. Link to comment
tuanphan Posted November 14, 2020 Share Posted November 14, 2020 12 hours ago, anothername said: I was super excited when I found this thread as I'm trying to do the same thing. Does this code work with 7.1 sites? I've tried every suggestion on the thread to no avail 😞 I'd be hugely grateful for any advice. Each page needs different code. Can you share link to page where you use image? We can help 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
katie_w_3 Posted November 16, 2020 Share Posted November 16, 2020 Hi, I wonder can anyone help. I am also having trouble formatting a page for mobile. I have created an edit of products from my site using product blocks, but these stack one on top of the other on mobile, which is difficult to view for so many items. Any suggestions how I could make these appear in 2 or 3 columns instead? Furthermore, the button links I have created stack on top too, I would prefer if they arranged beside each other. Is this possible? Many thanks for your help! URL: www.unarodden.com/the-gift-edit-1 Link to comment
tuanphan Posted November 17, 2020 Share Posted November 17, 2020 On 11/16/2020 at 7:45 PM, katie_w_3 said: Hi, I wonder can anyone help. I am also having trouble formatting a page for mobile. I have created an edit of products from my site using product blocks, but these stack one on top of the other on mobile, which is difficult to view for so many items. Any suggestions how I could make these appear in 2 or 3 columns instead? Furthermore, the button links I have created stack on top too, I would prefer if they arranged beside each other. Is this possible? Many thanks for your help! URL: www.unarodden.com/the-gift-edit-1 You mean Browse by Value & Browse by Personality? Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1605449828234_428558+.row { display: flex; } div#block-yui_3_17_2_1_1605449828234_428558+.row * { font-size: 11px; } } 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
katie_w_3 Posted November 17, 2020 Share Posted November 17, 2020 20 minutes ago, tuanphan said: You mean Browse by Value & Browse by Personality? Add to Home > Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1605449828234_428558+.row { display: flex; } div#block-yui_3_17_2_1_1605449828234_428558+.row * { font-size: 11px; } } Thank you so much @tuanphan. I would also like my images to appear in columns as they do on my other store pages for mobile. Maybe this will work for that too? Really appreciate your help! Link to comment
tuanphan Posted November 17, 2020 Share Posted November 17, 2020 Add to Home > Design > Custom CSS /* mobile 2 products row */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1605434151889_26849+.row>.span-4 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } div#block-yui_3_17_2_1_1605434151889_26849+.row>.span-4 .product-block { padding: 5px !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
katie_w_3 Posted November 17, 2020 Share Posted November 17, 2020 4 hours ago, tuanphan said: Add to Home > Design > Custom CSS /* mobile 2 products row */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1605434151889_26849+.row>.span-4 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } div#block-yui_3_17_2_1_1605434151889_26849+.row>.span-4 .product-block { padding: 5px !important; } } This is amazing @tuanphan! Thank you so much. The "Browse by Value" section has appeared perfectly, however, the "Browse by Personality" remains the same. Also, with regards the image sections, £0-60 shows the images as a perfect size, but displays them by column as opposed to left to right, and then all other sections appear as before. I fear this may be because of the way I have added sections? I have added some screenshots for explanation Link to comment
Guest Posted November 18, 2020 Share Posted November 18, 2020 On 11/14/2020 at 7:50 AM, tuanphan said: Each page needs different code. Can you share link to page where you use image? We can help easier Thanks so much for getting back to me. I actually found a setting in the summary block that let me adjust the settings for mobile and tablet individually which allowed me to achieve it that way. I'm not sure if I missed it earlier, or if it's a feature of the lazy summaries plug in that I installed, but I thought I'd mention it in case it helped someone else. Link to comment
katie_w_3 Posted November 22, 2020 Share Posted November 22, 2020 On 11/17/2020 at 5:54 PM, katie_w_3 said: This is amazing @tuanphan! Thank you so much. The "Browse by Value" section has appeared perfectly, however, the "Browse by Personality" remains the same. Also, with regards the image sections, £0-60 shows the images as a perfect size, but displays them by column as opposed to left to right, and then all other sections appear as before. I fear this may be because of the way I have added sections? I have added some screenshots for explanation Okay, so I've worked out how to get all products appearing as in the £0-60 category and I've the "Browse by Personality" buttons appearing in a row. However, you now need to scroll the screen to the left to view the 4th button. Is there a way to lay this section out as 2 rows of 2 buttons so all are visible? Also, still wondering how my products can be read from the desktop rows as opposed to columns, as this will make more sense? Apologies, I am completely new to coding, any suggestions will be gratefully received! I have added screenshots to explain. Many thanks! Link to comment
Guest Posted November 26, 2020 Share Posted November 26, 2020 On 9/3/2019 at 1:08 PM, pashapasha1570048753 said: So please bear with me as I'm a novice when it comes to CSS or any of this. I've been trying to google answers for the past few hours now to no avail. Essentially I'm just looking to have 1:1 images, with a title and a description, stacked in 2 columns on mobile. A gallery grid does basically what I want on desktop and mobile - but doesn't show descriptions. A summary block does it too but stacks one image on top of another and when I have 60+ images, it becomes a huge scroll. I have not been able to find solutions to either of these issues so if you have a solution to either instead it'd be greatly appreciated. So now, I've just succumbed to doing individual image stacks. I've found out how to shrink the image blocks just in mobile, however I still can't them to form rows/columns despite the extra room now they have on the right (as seen in the screenshot). The code I'm using is below. Any insight would be greatly appreciated. /storage/temp/15189-screen-shot-2019-09-03-at-10603-pm.png /storage/temp/15188-screen-shot-2019-09-03-at-10101-pm.jpg On 6/3/2020 at 8:22 PM, tuanphan said: Can you share link to page in screenshot? Hi, I am looking for some assistance. Having issues getting side by side image blocks on the mobile view on home page and product page, understand its a matter of of a css code and there are some similarities in responses but all look unique to page. How do I find this formula? Best, Raymond Link to comment
Guest Posted November 26, 2020 Share Posted November 26, 2020 Hi All, I am looking for some assistance. Having issues getting side by side image blocks on the mobile view on home page and product page, understand its a matter of of a css code and there are some similarities in responses but all look unique to page. How do I find this formula? Best, Raymond Link to comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 On 11/26/2020 at 12:00 PM, rmcspirit said: Hi All, I am looking for some assistance. Having issues getting side by side image blocks on the mobile view on home page and product page, understand its a matter of of a css code and there are some similarities in responses but all look unique to page. How do I find this formula? Best, Raymond On 11/26/2020 at 11:59 AM, rmcspirit said: Hi, I am looking for some assistance. Having issues getting side by side image blocks on the mobile view on home page and product page, understand its a matter of of a css code and there are some similarities in responses but all look unique to page. How do I find this formula? Best, Raymond On 11/22/2020 at 11:34 PM, katie_w_3 said: Okay, so I've worked out how to get all products appearing as in the £0-60 category and I've the "Browse by Personality" buttons appearing in a row. However, you now need to scroll the screen to the left to view the 4th button. Is there a way to lay this section out as 2 rows of 2 buttons so all are visible? Also, still wondering how my products can be read from the desktop rows as opposed to columns, as this will make more sense? Apologies, I am completely new to coding, any suggestions will be gratefully received! I have added screenshots to explain. Many thanks! Hi. Do you still need help on this? 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
katie_w_3 Posted December 3, 2020 Share Posted December 3, 2020 45 minutes ago, tuanphan said: Hi. Do you still need help on this? Oh my goodness, yes, @tuanphan! Thanks so much for checking in. I'm drawing a blank. Link to comment
feltromedia Posted January 25, 2021 Share Posted January 25, 2021 Hi there. Please would someone be able to help me get these 2 buttons side-by-side instead of stacked for mobile. I've tried some CSS on the forum but can't get it to work out. https://cowbell-duck-xfmb.squarespace.com/insempo password: Yarni1 Thank you Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 On 1/25/2021 at 9:51 AM, feltromedia said: Hi there. Please would someone be able to help me get these 2 buttons side-by-side instead of stacked for mobile. I've tried some CSS on the forum but can't get it to work out. https://cowbell-duck-xfmb.squarespace.com/insempo password: Yarni1 Thank you It looks like you solved with this CSS @media screen and (max-width: 767px) { div#block-fadad24a93adc073892b+.row>.span-6 { width:50% !important; float: 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
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 On 11/16/2020 at 5:45 AM, katie_w_3 said: Hi, I wonder can anyone help. I am also having trouble formatting a page for mobile. I have created an edit of products from my site using product blocks, but these stack one on top of the other on mobile, which is difficult to view for so many items. Any suggestions how I could make these appear in 2 or 3 columns instead? Furthermore, the button links I have created stack on top too, I would prefer if they arranged beside each other. Is this possible? Many thanks for your help! URL: www.unarodden.com/the-gift-edit-1 The url doesn't exist. Can you check again? 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
katie_w_3 Posted February 15, 2021 Share Posted February 15, 2021 On 2/2/2021 at 8:46 AM, tuanphan said: The url doesn't exist. Can you check again? Hi @tuanphan, apologies, the url is https://www.unarodden.com/the-gift-edit I have the columns working now but is there anyway to have the images read left to right from my desktop site, as opposed to vertically? It really scrambles the order. Thanks so much! 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