JonnyIlsley

Hi @Ziggy Thanks for your reply. I am learning CSS as I go. I just tried this and it worked perfectly. Thank you very much! Am I correct in saying that because I have created the class ".scroll-down", that is why I am able to then target that within my CSS? Just trying to understand things more for the future. Thanks, Jon

Hi, Is it possible to set media queries in HTML within a code block. I currently have multiple code blocks across my sight (they all have the same code). I am using these to show an animated scroll down arrow on different pages. This looks good on desktop however I want to hide the code block when it goes to screen sizes below 1000px. Is there a way to add a media query, like you would in CSS, to the HTML code so that I don't have to target each code block across my website in a massive string of CSS. The code for my animated scroll arrow is below: <div class="scroll-down"></div> <style> .scroll-down { position: absolute; left: 50%; bottom: -2px; display: block; text-align: center; font-size: 100px; z-index: 100; text-decoration: none; text-shadow: 0; width: 20px; height: 20px; border-bottom: 2px solid #2B6777; border-right: 2px solid #2B6777; z-index: 9; left: calc(100% - 28px); transform: translate(-50%, 0%) rotate(45eg); animation: bouncey_move_down 3s infinite; } /*animated scroll arrow animation*/ @keyframes bouncey_move_down { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); } 40% { transform: translateY(-20px) rotate(45deg); } 60% { transform: translateY(-10px) rotate(45deg); } } </style> Thanks, Jon

Hi @tuanphan, Was this ever solved? I am looking to make auto layout list sections across my site have a site margin of 4vw on mobile to match the rest of my site on mobile. The section is using Fluid Engine as well. For my site, I am using a site margin = 4vw. Everything seems to work well on desktop however when you get to mobile, If you use an auto layout section, it seems to not match the site margin. I need to make this happen to all auto list sections as I have multiple across my site. Thanks in advance, Jon

@tuanphan Sorry, I have been asked by the site owner to change this section so now it is using a list section. Is there a way to stop the animation when it comes in but keep the ability to scroll on these sections? The section id is = section[data-section-id="643ebedc7cece165a63fe33f"] I am just trying this out here but will need to apply this to all my related project pages as mentioned above. I think I just need to change the first part of this code. Change the .summary-item-list part? : .summary-item-list * { transform: unset !important; opacity: 1 !important; transition-delay: unset !important; transition: unset !important; }

Hi, I am looking to add bullet points to Auto Layout list sections. See in the "Civil" tab half way down the page listed below: https://hexahedron-soybean-zdl8.squarespace.com/services Password: testing123 At the moment, I am using this code to add a bullet point before using the :before css. //Bullet points before on an Auto Layout List section// #collection-6363b479b0e3fe59d5ec7759{ .list-item-content__title:before { display: inline !important; content: "•" !important; color: #2b6777; font-size:1.3rem; margin: 0 3px; } } This is working however, the only thing is, when text goes over 2 lines, the second line aligns itself left under the bullet point. I would like to get it to alight left directly below the first letter in the first line of text. This is essentially adding the indent to the second and following lines. I, however, am not sure how to achieve this. My initial thoughts are maybe I need to be targeting a different thing for my :before function. Thanks in advance, Jon

This is an example of a page where I will be using this. However, this will be at the bottom of every project you click into. Under the "Related Projects" section. https://hexahedron-soybean-zdl8.squarespace.com/private-homes/kenwood-lee-house Password: testing123

I thought this would be the case but it doesn't work for me. When resizing, the section still goes too small even with a max and min height set. Ideally I would like the max and min height to both be 20VH

@tuanphan We have looked at these sections previously and sorted everything else out when it came to resizing on mobile, however, I just noticed this on this one section as it's the only one where I am using text over more than one line.

Hi all, On my site, all of the pages start with a banner image and then the second section should be set at a Section Height of 20. I am normally using one-line titles in this second section. That way, when I set my banner image above to a Section Height of 80, the section height of these two sections totals 100 and therefore the page upon loading fits perfectly into the viewport on desktop. If I use more than one line of text in my second section (Section Height = 20), this seems to push the section out of the 100 section height viewport. So, to combat this, I need to reduce the padding around the second section on sections with more than one line. Through playing around, I set a max-height: 20VH for the section in question: https://hexahedron-soybean-zdl8.squarespace.com/ Password: testing123 (The section where it says Intelligent Engineering. Service Driven.) This seems to work perfectly as it removed some padding and center-aligned the text within the section exactly how I wanted it. However, as I resize my screen, by dragging the bottom of the webpage up, it seems that the section starts to get too small and the text starts to become cut off. Is there a way I can force a max-height of 20 but also keep that as a min-height as well. I read somewhere that min-height over rules max-height however I'm still learning CSS so any info is greatly appreciated. Picture 1 of viewing it on a full screen size desktop - This is exactly how i want it to look. Picture 2 of viewing it with a reduced window size. - It starts to cut off the text Many thanks in advance, Jon

For some reason, this makes my summary blocks that are using a hover to show text display incorrectly. Unfortunately didn't work. See images attached.

@tuanphan Would you be able to show me how I could use this code but apply it to every summary block excluding these summary blocks: #block-3e3a8fb0677b05b9467c #block-yui_3_17_2_1_1680625588392_25188 #block-88491361d1ed9516cf34 Thanks

This seems to work. Thank you very much @tuanphan!

Hi @tuanphan, When I try this, the animation seems to stop however now I cannot press the next or previous button on the carousel which allows me to move to the next items in the summary block.

Thanks @tuanphan Worked Perfectly!

I am wondering if it's possible to reduce padding around a Fluid Engine summary block. This is why I was looking at this thread initially as I couldn't seem to find anything else on the topic.I am using a plugin from Will Myers to create tabs on a page.This means that when you put a section inside the tab, it squashes the width to fit the tab block. However, when using a summary block in Fluid Engine it seems to create excess space at the bottom of the summary block and therefore creating a big gap.To solve this I either need to:1) remove the excess padding on my Fluid Engine summary block container. To do this I would need to make sure it is responsive on all screen sizes and that when I resize, I do not lose text elements from the summary block that are floating underneath the image.or 2) Do not use a Fluid Engine section. Revert back to a classic editor section. This seems to sort the padding issue I think, however, to achieve the same layout as an FE section, I need to be able to make the summary block container stretch from edge to edge of the section.Currently, you will see the tabs under the Section entitled "Team Form" :https://hexahedron-soybean-zdl8.squarespace.com/about-us#TeamFormpassword: testing123The tables are titled "All Staff" and "Management" The "All Staff" tab shows what happens when I use a Classic Editor section (see option 2 above)The "Management" tab shows what happens when I use a Fluid Engine section (see option 1 above)If you know any way in which I can achieve the layout that is visible in the "Management" tab but have no spacing at the bottom, that would be great. Thanks very much in advance,Jon

For this, I was wondering if it is possible to turn off Site Wide Animation on summary blocks. I do not want the images to slide up from the bottom on the initial load. This is what my site-wide animation is set to. However, anything I have tried to turn off site animation for these blocks stocks the summary block carousel from being able to scroll around. See bottom of page, the section titled "Related Projects" https://hexahedron-soybean-zdl8.squarespace.com/commercial/summit-house password: testing123

Apologies, I thought this was a different thread. Shall I make a new thread with the query above?

I am wondering if it's possible to reduce padding around a Fluid Engine summary block. This is why I was looking at this thread initially as I couldn't seem to find anything else on the topic. I am using a plugin from Will Myers to create tabs on a page. This means that when you put a section inside the tab, it squashes the width to fit the tab block. However, when using a summary block in Fluid Engine it seems to create excess space at the bottom of the summary block and therefore creating a big gap. To solve this I either need to: 1) remove the excess padding on my Fluid Engine summary block container. To do this I would need to make sure it is responsive on all screen sizes and that when I resize, I do not lose text elements from the summary block that are floating underneath the image. or 2) Do not use a Fluid Engine section. Revert back to a classic editor section. This seems to sort the padding issue I think, however, to achieve the same layout as an FE section, I need to be able to make the summary block container stretch from edge to edge of the section. Currently, you will see the tabs under the Section entitled "Team Form" : https://hexahedron-soybean-zdl8.squarespace.com/about-us#TeamForm password: testing123 The tables are titled "All Staff" and "Management" The "All Staff" tab shows what happens when I use a Classic Editor section (see option 2 above) The "Management" tab shows what happens when I use a Fluid Engine section (see option 1 above) If you know any way in which I can achieve the layout that is visible in the "Management" tab but have no spacing at the bottom, that would be great. Thanks very much in advance, Jon

Sorry, I meant, at the bottom of the page. There is a section that says, make it stand out. However, it would be great to know: 1) can you make auto layout sections, like the one at the bottom of this page edge to edge wide. (Like how you can drag a fluid engine text box or image right to the edge of your page and outside the Fluid Engine grid) 2) can you make a Classic Editor section edge to edge wide? Thanks, Jon

Was there any solution to this? Thanks

Hi guys, Is there any way to make an Auto Layout section (for example a Testimonial or People section) full-width on Fluid Engine? Trying to target with CSS but not too sure what to target. My site is below: https://hexahedron-soybean-zdl8.squarespace.com/services#ServicesOverview Password: testing123 In the section that says Make It Stand Out I am trying to make this section full-width. Thanks, Jon

Did anyone find a solution to this? I am trying to achieve something similar using the :not function however for a summary block. Thanks This is my current code: //Hover Summary Blocks of Project Thumnails - Summary Block Appearance// @media screen and (min-width:800px){ .summary-item:not(#block-yui_3_17_2_1_1678287406551_217495) { //only use position relative with carousel summary block position: relative; img { //transition: all .5s ease!important; } .summary-content { position: absolute; color: #fff!important; top: 50%; left: 50%; width: 80%; opacity: 0!important; pointer-events: none; transition: all .5s ease!important; transform: translate(-50%, -50%)!important; -webkit-transform: translate(-50%, -50%)!important; -ms-transform: translate(-50%, -50%)!important; -moz-transform: translate(-50%, -50%)!important; } .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt { color: #fff!important; } } .summary-item:hover { img { -webkit-filter: brightness(25%); filter: brightness(25%); } .summary-content { opacity: 1!important; } } }

Hi, Is there anyway to turn off Expand First Item on mobile but keep it on on Desktop? Thanks, Jon

Think i managed to solve this. Thanks

Hi Tuan, I think I managed to solve this. Not sure if there's a better/cleaner way to do this. I used this to achieve it incase anyone else might want to know. //News Blog Post Pages - Header Settings// .collection-type-blog-masonry.view-item .header#header { background: #949598 !important; a#site-title { color: white;} .header-nav-item a{ color: white;} }