MoeTalks

I guess some developer heard me and didn't like what i wrote because here we ago again. My website looks like crap because the spacing between paragraphs is inconsistent and look at this. And when I add another text block on top of that to fill in the gap then the paragraphs are off. There is just no winning with this.

This does not work for me at all. No way, no how, no shape, form, or fashion. I gave up on this.

Maybe it's been like this all along but I don't ever remember the grid not taking up the full space of the section. I can actually put a text box or video or image over to the white space where the blue line is but I always thought it took up the whole screen. Is this new or am I just being old and forgetful? Is this some sort of margin i have set and don't realize it?

Thank you for that. But that did not work but I went into the inspector and found this and this works. .sqs-block-spacer { padding-top: 0!important; padding-bottom: 0!important; min-height: 0vh!important; } I've added that to my css since I want that ability on anything that's related to 7.0 if i have to create something in 7.0. Thank you again @Web_Solutions for pointing me to the right direction.

How do I get rid of all that extra space in 7.0. In 7.1 it's minute because it's just code AND it does not show up as an extra space but this code takes up space in editing mode and throws off the paragraph spacing in live mode. My only alternative is to take this and put this in CSS but I have enough stuff in there and just need this code on this page. Is there a way to make that smaller or at least invisible when I am looking at it from the live version? Thanks.

Yes i saw the drag handles. I was hoping they would act like blog pages but thats fine. There is not a lot right now. Thanks @creedon have a great day

I published a video on a blog post today and changed the date to April 14, 2023 but it is still showing up as the first post. Do I have to manually go through all of these and re-arrange them? Thanks https://moetalks.com/the-playlist PW 1695

I went a totally different route and scratched that. But thank you.

I just don't understand why this keeps happening when I make a change and then end up having to redo the entire section(s) of a page (no exaggeration). I've uploaded a gif. Why is there so much extra spacing. The experience is horrifying when viewing it on the web. The inconsistency is maddening. I've change spacing, margins, etc. and first it appears fixed, and then wammo. I have the max width set at 1200 on purpose so that it doesn't stretch out but if a user opens their browser far out spacing once again becomes off kilter. I understand that this is fluid engine but I know i'm not the only one who is going through this because I'm reading so many of these same stories that my head hurts but there doesn't seem to be any solution to this. Am I using the wrong browser, (chrome), should I use firefox? Do I need to try and keep my browser width the same size when I am editing (which is hard to know since I have a 34 inch curved monitor and a 16 inch macbook pro) so they are never going to be the same. Where do I need to report this to because I understand this is a forum and thus far no one has had an answer so please just tell me where to take this higher and I will? It costs to much money and to much time to have to constantly worry about a spacing issue. Thank you for listening.

Gotcha. I think I'm just gonna use CapCut and build a quick little gallery for this and call it a day. Thanks @Ziggy

Is there a way to remove all the spacing between the slide show and the caption? I've searched all over and tried to see what was in the inspector but I cannot seem to find how to target the space. I've tried different margins and padding. I've used the below and it's helped with the section margin but I cannot target the caption spacing. If I use line-height: .9, it does move the text up but the text gets hidden behind this weird invisible box. Is there a way to remove the margin/spacing between the captions in a simple slide show? I'm using a slide up animation at 5s with the simple slideswhow. Thanks in advance. section[data-section-id="664a1d6722dbc7301be38715"]{ .gallery-slideshow { padding: 0px !important; margin:0!important } .gallery-caption-content {font-size: 1.25rem!important;} .gallery-slideshow {margin-bottom: 80px!important; } } https://www.moetalks.com/television/aes3#mothersday PW 2024

It's the caption below that is adding the extra space because I am facing that right now. If I can capture what the code is for that I will post it if someone hasn't already done it.

I'm closing this. I'm doing something wrong but will deal with it another time.

Yeah I stil get this in markdown so I try not to use it anymore.

I appreciate your thought process on this and I agree about Page header code and that is exactly where I would do it if the individual portfolio sections had a page code injection but thank you for the "as long as it works". Have a great Sunday afternoon.

Hey @creedon So, and tell me if this is improper way to do something but since I have the business plan I put the whole script in a code block on the page I wanted and it worked PERFECTLY on the page I wanted and it didn't show up on any other page. Is that a wrong way to do this or is this acceptable?

Good morning @creedon. I did both. I only want it work on certain pages because not all the pages need a back to top arrow. As you stated, when I do it the first way (which is the suggestion of Will Meyers), it works perfectly but it puts it on all pages, which I don't want. When I do it the latter, it works on the page I want but I also get that extra top button you saw underneath the footer. If there was a way I could suppress it on the pages I don't want that would be great. Also, I'm trying to use this on the portfolio pages and those pages can sometimes be kind of funky. I made a back to top button without java script which worked great but on mobile pressing it was hit or miss. It looked like it was behind everything. With Java, the button was on top of everything and I was able to hit it on mobile every time. I tried a z-index on the button that I created without Java but that didn't work. I will keep plugging at it. Thanks for responding. I appreciate it.

@tuanphan. Thanks. I tried his code and it works on the page I put the css code on but on every other page underneath the footer it shows the below photo. This is not something you can help with, I've emailed him so hopefully he will get back to me. If not, back to the drawing board but I would totally use his if it worked. Thanks for the recommendation. moetalks.com 2024 This is on every page under the footer this is the way it looks on the page that I wanted it on,. PERFECT

Java, as I have just proven, is not my thing. Can someone recommend any plug-in site that they have used that they feel like they could recommend. Ghost Plug-ins has one but I want to just make sure look around before I make a decision. Thanks.

Actually that was not half bad but it did not match the header and made the footer bigger than I wanted and the bottom of the footer was still square but that gave me an idea. I simply made the background of the footer section white, add a shape to cover the entire footer, added the radius and color I wanted, sent the shape to the back and brought the text forward an now it looks just like the header. Thank you.

I was able to get the header rounded with the code below. I tried to copy and change it to footer or footer.sections and what is produced was nothing like the header. I don't know what element I should be targeting and looking in inspect I only see the words fluid-engine with numbers. I would love to be consistent with the rounded corners but if it can't be done I can go back to being square. Thanks. www.moetalks.com PW 2024. On the homepage. .header { margin: 0px; border-radius: 20px; border: 2px solid #FFC0CB; }

OUCH Oh @Ziggy that just hurts my heart 😂. I thought I was doing something. Thank you for looking this over I will keep reading and looking at videos to get a full understanding. What is your buy-me-coffee link? I appreciate you taking the time.

@Ziggy Ok, below is an example. I added all of these to my sitewide code injection because I want these to affect everything. But I left anything that dealt with data-section, #collections, or #blocks in the Custom CSS portion. Some of which could get added to a page code but I can never find where I added the code which is why I leave it i Custom CSS. Is this the way you mean and thank you again for the response. <style> /* changes font site wide */ @import url('https://fonts.googleapis.com/css?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap'); // <uniquifier>: Use a unique and descriptive class name // <weight>: Use a value from 400 to 700 .instrument-sans-instrument { font-family: "Instrument Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; } h1, h2, h3, h4, p { font-family:"Instrument", sans-serif;} </style> <style> /* Change Burger Menu Color On Mobile */ body:not(.header--menu-open) .burger-inner>div { background-color: white!important; } </style> <style> /* Move Over Hyperlinks */ p a { -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } p a:hover { margin-left: 20px; -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } </style> <style> /*smooth scroll*/ html {scroll-behavior: smooth;} </style> <style> /* Header Navigation - Pill Hover Style - Ghost */ .header-nav-item a { padding: 0px 5px !important; background-image: none !important; transition: all ease-in-out .2s !important; } .header-nav-item a:hover { background: black; padding: 0px 5px; border-radius: 50px; transition: all ease-in-out .2s !important; } </style> <style> /* this changes all video captions on entire site */ .video-caption-wrapper {text-align: center; font-size: 1rem; padding:0!important;} .video-caption p { margin: 10px 0 0!important; ; line-height:25px;} </style> <style> /* Add Shadow To Videos */ .sqs-video-wrapper { box-shadow: 5px 15px 5px rgba(0,0,0,0.2) } </style> <style> /* This is for <br> line break that separates the stories */ hr { overflow:initial; &:after { content:''; width:15%; height:10px; display:block; background: #0b5394; top:-5px; margin:auto; position:relative;} } </style> <style> /* this hover affects entire site */ a {color: #0b5394!important; text-decoration: none!important; font-weight:bold!important; } a:hover { color: #0b5394!important; text-decoration: underline!important; font-weight:bold!important; } </style> <style> /* changes header and section width of all pages and images and videos */ #header { max-width: 1496px; margin: auto; } section.page-section { max-width: 1496px; margin: auto; } </style>

Now that I have the business plan, I'm trying to read articles and understand when I should place code in my header/footer and when I should not. EXAMPLE. Below is the google font that I am using throughout the site. Shouldn't this go into the header code-injection instead of the CSS design box. I'm still researching this to see how to best implement these change. My thought is sitewide changes can go into header code while specific ID's can go into CSS Design or even page code injection (which I think I understand but I will look up for better understanding). Just wanted some of your professional thoughts. Thanks. @import url('https://fonts.googleapis.com/css?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap'); // <uniquifier>: Use a unique and descriptive class name // <weight>: Use a value from 400 to 700 .instrument-sans-instrument { font-family: "Instrument Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100; } h1, h2, h3, h4, p { font-family:"Instrument", sans-serif;} // -- END FONT DESIGN CHANGE -- //