Georgiaperson Posted July 5, 2021 Share Posted July 5, 2021 Site URL: https://www.findthemotherlode.com/read Hi there. My blog looks fine on desktop view, but when I switch to mobile view, the posts are all really close together (no gaps), despite the padding being set to the maximum. Is there a CSS injection to increase the space between the blog posts in MOBILE VIEW ONLY, leaving the desktop view the same? Thanks! Link to comment
tuanphan Posted July 5, 2021 Share Posted July 5, 2021 Hi. What is site access password? 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 July 7, 2021 Share Posted July 7, 2021 On 7/5/2021 at 5:28 PM, Georgiaperson said: m0th3rLode! Add to Design > Custom CSS /* Mobile-Space under read more */ @media screen and (max-width:640px) { article.blog-basic-grid--container.entry.blog-item.is-loaded { padding-bottom: 40px; } } 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
Chlobot Posted August 14, 2021 Share Posted August 14, 2021 @tuanphan Hi Tuan! How would I do this for an alternating side by side blog? I tried altering the code above but I couldn't figure it out. Here is the website: https://watermelon-walrus-pmsj.squarespace.com/learn pw: ilovecrystals Thank you!! - Chloe Link to comment
tuanphan Posted August 14, 2021 Share Posted August 14, 2021 20 hours ago, Chlobot said: @tuanphan Hi Tuan! How would I do this for an alternating side by side blog? I tried altering the code above but I couldn't figure it out. Here is the website: https://watermelon-walrus-pmsj.squarespace.com/learn pw: ilovecrystals Thank you!! - Chloe Hi. Try this /* Mobile-Space under read more */ @media screen and (max-width:640px) { div.blog-alternating-side-by-side article { padding-bottom: 40px; } } 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
Chlobot Posted August 15, 2021 Share Posted August 15, 2021 @tuanphan Once again you saved the day! Thank you, this worked perfectly :D Link to comment
autpops Posted March 21, 2022 Share Posted March 21, 2022 Hi @tuanphan! How would you do this for a masonry blog? I also tried tweaking the code, but can't figure it out. Link to comment
tuanphan Posted March 22, 2022 Share Posted March 22, 2022 12 hours ago, autpops said: Hi @tuanphan! How would you do this for a masonry blog? I also tried tweaking the code, but can't figure it out. Can you share link to your blog page? We can check its class name 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
duducampos Posted October 19, 2022 Share Posted October 19, 2022 Hi @tuanphan , hope you're doing great! And what about the space between images and post title, how can I adjust the padding between these two elements only in mobile? Best! Link to comment
tuanphan Posted October 23, 2022 Share Posted October 23, 2022 On 10/19/2022 at 9:17 PM, duducampos said: Hi @tuanphan , hope you're doing great! And what about the space between images and post title, how can I adjust the padding between these two elements only in mobile? Best! Can you share link to a blog page? 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
Gemma_mineralcreative Posted October 31, 2022 Share Posted October 31, 2022 Hi I'd like to do the same. My site is: https://piccolo-robin-7wh6.squarespace.com/ Additionally, the padding between title and exerpt is different on mobile and I'd like to change. How do I target this code? Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 On 10/31/2022 at 10:14 PM, Gemma_mineralcreative said: Hi I'd like to do the same. My site is: https://piccolo-robin-7wh6.squarespace.com/ Additionally, the padding between title and exerpt is different on mobile and I'd like to change. How do I target this code? Add to Design > Custom CSS @media screen and (max-width:767px) { /* space between posts */ article.blog-basic-grid--container.entry.blog-item.is-loaded { margin-bottom: 100px; } /* title excerpt */ .blog-basic-grid .blog-title { margin-bottom: 100px; } } 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
Amanda Gonzalez Posted January 29, 2023 Share Posted January 29, 2023 Hi there! I'd like to make the same changes as Georgiaperson: add more space underneath the Read Me on mobile view only, but I've not been able to make it work using the answers above. My site is studiojournal.co FYI: I'm using Masonry and Fluid Engine. If anyone could lend a hand, it would be much appreciated! Amanda Link to comment
tuanphan Posted February 2, 2023 Share Posted February 2, 2023 On 1/29/2023 at 6:23 PM, Amanda Gonzalez said: Hi there! I'd like to make the same changes as Georgiaperson: add more space underneath the Read Me on mobile view only, but I've not been able to make it work using the answers above. My site is studiojournal.co FYI: I'm using Masonry and Fluid Engine. If anyone could lend a hand, it would be much appreciated! Amanda Hi, Can you share link to blog page on your site? 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
Amanda Gonzalez Posted February 4, 2023 Share Posted February 4, 2023 Thanks for responding, tuanphan! The problem is on the landing page using mobile, so using a mobile browser/viewer, go to https://studiojournal.co, and you'll see my spacing issue there. I hope this helps! Thanks again. Amanda Link to comment
tuanphan Posted February 8, 2023 Share Posted February 8, 2023 On 2/4/2023 at 1:34 PM, Amanda Gonzalez said: Thanks for responding, tuanphan! The problem is on the landing page using mobile, so using a mobile browser/viewer, go to https://studiojournal.co, and you'll see my spacing issue there. I hope this helps! Thanks again. Amanda Because you are using Masonry Layout. Add this to Design > Custom CSS. Change 70px to adjust spacing /* Blog Masonry to grid mobile */ @media screen and (max-width:767px) { div#BlogMasonryContainer { height: auto !important; display: grid; grid-template-columns: repeat(1,1fr); grid-gap: 70px; } div#BlogMasonryContainer>article { transform: unset !important; width: 100% !important; position: relative !important; } div#BlogMasonryContainer img { height: auto !important; } .blog-masonry .image-wrapper { height: auto !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
Amanda Gonzalez Posted February 12, 2023 Share Posted February 12, 2023 On 2/8/2023 at 8:17 PM, tuanphan said: Because you are using Masonry Layout. Add this to Design > Custom CSS. Change 70px to adjust spacing /* Blog Masonry to grid mobile */ @media screen and (max-width:767px) { div#BlogMasonryContainer { height: auto !important; display: grid; grid-template-columns: repeat(1,1fr); grid-gap: 70px; } div#BlogMasonryContainer>article { transform: unset !important; width: 100% !important; position: relative !important; } div#BlogMasonryContainer img { height: auto !important; } .blog-masonry .image-wrapper { height: auto !important; }} PERFECT. Thanks so much, tuanphan. It worked a treat! Link to comment
Wisam Posted June 23, 2023 Share Posted June 23, 2023 (edited) Hello. I'm using Squarespace 7 and need help with two things on mobile-view ONLY. 1. Increase space above the blog listing (padding or margins) 2. Increase the space between posts to almost double what it is right now. I'm using the Masonry blog view. Link to my site: danishfarhan.com Thanks a lot in advance! Edited June 23, 2023 by Wisam Forgot a detail Link to comment
tuanphan Posted June 24, 2023 Share Posted June 24, 2023 5 hours ago, Wisam said: Hello. I'm using Squarespace 7 and need help with two things on mobile-view ONLY. 1. Increase space above the blog listing (padding or margins) 2. Increase the space between posts to almost double what it is right now. I'm using the Masonry blog view. Link to my site: danishfarhan.com Thanks a lot in advance! These padding? 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
Kellyx10 Posted August 19, 2023 Share Posted August 19, 2023 (edited) Hi @tuanphan I have a similar question about padding issues on the blog post list. The current padding between posts is even, so it is confusing to know the relation between the titles and thumbnails. How can I make the upper padding smaller, and the lower padding bigger, as the attached reference picture? https://ris-proto.squarespace.com/config/ Edited August 24, 2023 by Kellyx10 client's privacy Link to comment
tuanphan Posted August 21, 2023 Share Posted August 21, 2023 On 8/19/2023 at 2:02 PM, Kellyx10 said: Hi @tuanphan I have a similar question about padding issues on the blog post list. The current padding between posts is even, so it is confusing to know the relation between the titles and thumbnails. How can I make the upper padding smaller, and the lower padding bigger, as the attached reference picture? https://ris-proto.squarespace.com/config/ Which page are you referring to? https://ris-proto.squarespace.com/?noredirect 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
Kellyx10 Posted August 21, 2023 Share Posted August 21, 2023 @tuanphan Here it is. https://ris-proto.squarespace.com/works How can I make the upper padding smaller, and the lower padding bigger, in the mobile view? Thanks! Link to comment
tuanphan Posted August 23, 2023 Share Posted August 23, 2023 On 8/21/2023 at 7:57 PM, Kellyx10 said: @tuanphan Here it is. https://ris-proto.squarespace.com/works How can I make the upper padding smaller, and the lower padding bigger, in the mobile view? Thanks! Add to Website > Website Tools > Custom CSS /* Works - Mobile - Space */ @media screen and (max-width:767px) { /* top space default is 5vw */ .blog-article-spacer { height: 2vw !important; } /* bottom space default is 30px */ .blog-basic-grid .blog-basic-grid--container.is-loaded { margin-bottom: 50px; } } 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
Kellyx10 Posted August 24, 2023 Share Posted August 24, 2023 Yes, it works well. Thank you so much @tuanphan :)) 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