Eventide Posted March 9, 2022 Share Posted March 9, 2022 (edited) Site URL: https://www.relativelygenealogy.com/blog I have too much vertical space between the text section and the blog section.ย I'd appreciate some help with this and I'd like the spacing to look similar to the contact page. ย thanks! Edited March 9, 2022 by Eventide trying to be more specific Link to comment
Jia Posted March 10, 2022 Share Posted March 10, 2022 8 hours ago, Eventide said: Site URL: https://www.relativelygenealogy.com/blog I have too much vertical space between the text section and the blog section.ย I'd appreciate some help with this and I'd like the spacing to look similar to the contact page. ย thanks! Hi, add this code to custom css (Design > Custom CSS) and let me know how it goes ๐ .tweak-blog-basic-grid-width-inset .blog-basic-grid { margin-top:-60px; } Eventide 1 Please give this a ๐ย if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
Eventide Posted March 10, 2022 Author Share Posted March 10, 2022 Hi Jia- Thanks so much. My skills in CSS are limited so I don't think I ever would have gotten the first part. Everything looks great on desktop but not great on mobile. Depending on what device I am looking at it might be too close to close to the blog posts below or too high. Any suggestions? Link to comment
Jia Posted March 11, 2022 Share Posted March 11, 2022 14 hours ago, Eventide said: Hi Jia- Thanks so much. My skills in CSS are limited so I don't think I ever would have gotten the first part. Everything looks great on desktop but not great on mobile. Depending on what device I am looking at it might be too close to close to the blog posts below or too high. Any suggestions? We can use media queries so the margin will only apply on desktop. You can try replacing the previous code with this and let me know what you think ๐ .tweak-blog-basic-grid-width-inset .blog-basic-grid { @media screen and (min-width:768px) { margin-top:-60px; } } Eventide 1 Please give this a ๐ย if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
Eventide Posted March 12, 2022 Author Share Posted March 12, 2022 (edited) It helps. The placement is consistent but still too far away on mobile view. Any suggestions? The contact page title is similarly distant on mobile view also. So I may need to apply the same to that page. Edited March 12, 2022 by Eventide Link to comment
Jia Posted March 13, 2022 Share Posted March 13, 2022 12 hours ago, Eventide said: It helps. The placement is consistent but still too far away on mobile view. Any suggestions? The contact page title is similarly distant on mobile view also. So I may need to apply the same to that page. Add this code, it's for the margin on mobile view. /** FOR MOBILE **/ .tweak-blog-basic-grid-width-inset .blog-basic-grid { @media screen and (max-width:767px) { margin-top:-35px !important; } } The mobile view should look like this: The contact page's mobile view looks great on my end, but here's the code for if you'd like to adjust it (just edit the value (5px) to what you prefer. @media screen and (max-width:767px) { .sqs-block.form-block.sqs-block-form { margin-top: -5px; } } Let me know how it goes ๐ Please give this a ๐ย if it helps www.sevenstars.studiowww.instagram.com/sevenstars.studio Link to comment
Eventide Posted April 15, 2022 Author Share Posted April 15, 2022 Jiaย - I don't know if you are still following this, but this solution is no longer working at least for desktop. Not sure what changed. Hoping I can enlist your help again. thx. Link to comment
Eventide Posted April 15, 2022 Author Share Posted April 15, 2022 Nevermind. I figured it out - I changed the width from inset to full. All good now., 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