Search the Community

Site URL: https://www.australianwildlifehealthinstitute.org Hi there, I have two individual text boxes on my home page which I'm trying to center as if it were one div? My best guess is containers /flex, but I can't figure out the correct code to make this happen. I've been trying to figure this out for the last few hours now and can't for the life of me figure out why it's behaving like it is! As an aside, when you currently resize the window the text with the green background doesn't wrap/move underneath when there isn't enough space. Instead it overlaps the AWHII, which I believe has something to do with the fix width sizes? pw: awh11

Site URL: https://www.no-frames.com/photo-test/category/Lifestyle Hi, 1. Is there a way to align the baseline of the text to the bottom of an image to the left of it? 2. Can I control the size of the image and the height of the footer?

I am wanting to adjust the layout of the navigation links in my header. The templates provided in site styles do not satisfy the layout that I want and I have yet to find any code that does what I want. All I want to do is move "Contact" to the right side of the header and leave "Work" on the left side. I am able to add a button but the buttons do not achieve the clean look I am wanting. Does anyone have any suggestions on how to achieve this fix?

Site URL: http://www.littlepinetoys.com Can someoe give me the codes please? As stated, the first slide is perfect, but on the second I would like text and button on the left side, and on the thrid slide on the right side.

Site URL: https://weedwise.squarespace.com Hello. Can anyone help me please? I am trying to align some customised buttons and lines on the home page of the following site: https://weedwise.squarespace.com (pw: W33dw1s3) There are three sections with button links to other pages, each separated by a line. What I am trying to achieve is for the line below each one to attach itself to the bottom of the button on all devices. Currently, although I have added some CSS code for mobiles, tablets and desktop, the line still isn't in the right place and moves on different screen sizes. I have attached two screenprints: one showing what it currently looks like and one with the desired effect. Please ignore the red lines, as they are not required. Is there a way of using CSS to say that you want the two items to align? I'd really like to get this site live this week and this is really bugging me! Thank you! Lynne

Site URL: https://hexagon-cyan-mljc.squarespace.com/ Hello, I am doing something wrong apparently - I want to vertically center two white blocks. When I change it in the console - data-alignment-verical="center" it does what I want. But when I try to change it in Custom CSS panel with that piece of code, it does't work. 😞 What am I missing? pass: CXsa2022 section[data-section-id="61e1597d70a0b5095c890d62"] .row { display: flex; align-items: center; justify-content: center; }

Site URL: https://www.jarnanaturbruksgymnasium.se/#oppet-hus-inbjudan Hello, If you first check this site: https://www.jarnanaturbruksgymnasium.se/#oppet-hus-inbjudan When you go to this url then there is an old text appearing.I want to delete the old text but I can't find this old text when I edit?! https://www.jarnanaturbruksgymnasium.se/oppet-hus-inbjudan Anybody who can help me? Thanks I advance, Ronald

Can someone tell me how to make this text list align? Many thanks in advance!

Site URL: https://www.no-frames.com/photo-test/category/Lifestyle Hi, In case my client has short pages, without much content, how to keep the footer consistently at the bottom of the viewport and the same height across desktop to tablet? Right now, the footer is aligned top to the bottom of the page content, and the bottom of the footer extends it's background color to the bottom of the browser window. View this page in tablet size: https://www.no-frames.com/photo-test/category/Lifestyle

Hi, Thanks to this forum, I have been able to assign how many thumbnails per row display on mobile and tablet by adjusting "%", however, since it is by "%" and not by number per row, changing 9 across to 5 or 6 results in rows not having the same number of thumbnails....so I would like to at least center the grid thumbnails. Not sure if I am assigning the centering in the right place, as it's not centering. TABLET VIEW FOR: https://www.no-frames.com/nf-home > Clients section (div#block-4c0ecb71fe65b1f517d7) *Also, not sure why video is not appearing at the top of the page on tablet and mobile

Site URL: https://www.connectinghomes.sg/

I'm having trouble making icons look clean in Squarespace. The pngs I've uploaded are getting compressed in ways that make them look poor quality. So I'm trying to use SVG icons instead. I opened my SVG icon in a text editor, copy and pasted it into a code block in Squarespace and added width and height properties to size it. However, for the life of me I can't figure out how to center the icon. Screenshots attached of where I'm stuck and the code I'm currently using. Feel like I'm really close. Does anyone have a solution for this one? Many thanks! Chris

Site URL: https://www.nommad.be/ Hi Everyone, First time I'm actually posting a question myself on this forum but have already learned a lot from previous questions here. I've added an animated headline on my website. Everything looks good on desktop version, but on the mobile version the line-height between the pink words and the white words isn't correct. I've tried multiple things but nothing changes. I'm not a developer, what I was able to code here is just copy and paste and changing some things reading a lot on forums like this one. Could someone help me trying to figure out what I should do / add / change / delete here to be able to have the same line-height on mobile version as well please? My website is: https://www.nommad.be. I've also added the CSS code and HTML code I used below. Thanks in advance, Best Regards and happy new year! Dom Here is the custom CSS I used: .fadeIn{ display: inline; line-height: 0.4; } .fadeIn div{ animation: fadeEffect 7.5s linear infinite 0s; -ms-animation: fadeEffect 7.5s linear infinite 0s; -webkit-animation: fadeEffect 7.5s linear infinite 0s; color: #FF31CA; opacity: 0; position: absolute; } .fadeIn div:nth-child(2){ color: #FF31CA; animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .fadeIn div:nth-child(3){ color: #FF31CA; animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } /*FadeIn Animation*/ @-moz-keyframes fadeEffect{ 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: translateY(0px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes fadeEffect{ 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: translateY(0px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes fadeEffect{ 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: translateY(0px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } And this is the custom coding I used for my header: <h1 style="white-space:pre-wrap;">the most powerful natural</h1> <h1> <div class="fadeIn"> <div>cleaners</div> <div>degreasers</div> <div>deodorizers</div> </h1> <br><h1 style="white-space:pre-wrap;">for your business</h1>

Site URL: https://vuvuzela-horse-w33t.squarespace.com Couple issue's I'm hoping to get some help with. The first being the alignment of my logo, as you can see from the screenshot attached - it aligns slightly to the right when viewed on mobile. I found some suggested code in a previous post (attached) but that hasn't worked either. The second issue is my headings, when viewed on mobile they hyphenate, when in reality I'd like them to automatically rescale when viewed on mobile so they remain on a single line. Hope this all makes sense & thank you in advance!

Site URL: https://www.nuligoods.com/shop Looking for a way to put my "list title" and "list price" on the same line. Currently I'm stuck at the default (below circled in red) where they are stacked. Aiming for something like this (highlighted in yellow) where they are next to each other: My site URL is https://www.nuligoods.com/shop Thanks in advance!

Site URL: http://www.roniselects.com Hello- After so much tweaking for the life of me I am unable to remove the space between my nav menu and my video block. I want to specifically bump up the video block - it is widescreen and is automatically centered on the block. Is there a way to align the video to the top of the block?

Site URL: https://www.tribeandsol.com/shop Hi, I went to additional info and added the accordion insert from menu options but it is not aligning properly under the product description before the add to cart button. Can you help with this? Also, do I have to add accordion manual to each product or is there a way to do is across the site I have over 500 products. This is my current shops page https://www.tribeandsol.com/shop I want it to look like this:

Site URL: https://www.google.com/search?q=tothe.town&sxsrf=AOaemvL1ugfJ7SO7mmFD0x_LHUcs5FJ8Cw:1641241019621&ei=u1nTYfK-JZCjptQPpqKoqAI&ved=0ahUKEwiyiNyfs5b1AhWQkYkEHSYRCiUQ4dUDCA4&uact=5&oq=tothe.town&gs_lcp=Cgdnd3Mtd2l6EAM6BAgjECc6CggAELEDEIMBEEM6BAguEEM6CgguELEDEIMBEEM6CgguEMcBEK8BEEM6BAgAEEM6BwguELEDEEM6BQgAEJECOggIABCABBCxAzoOCC4QgAQQsQMQxwEQrwE6CAguEIAEELEDOgsILhCABBDHARCvAToFCAAQgAQ6BwgAEIAEEAo6BQguEIAEOgcILhCABBAKOgQILhAKOgQIABAKOgYIABAKEB46BggAEA0QHjoICAAQCBAKEB46CQgAEMkDEA0QHkoECEEYAEoECEYYAFAAWP0KYO0MaABwAngAgAGpAYgBlQqSAQMyLjiYAQCgAQHAAQE&sclient=gws-wiz Hello all, PLEASE NOTE THE SITE URL IS INCORRECT SQUARESPACE WILL NOT ALLOW ME TO USE MY ACTUAL URL <tothe.town> ON THE FOURM. I'm wondering if there is a way to remove the arbitrary cap on the Element Spacing (Horizontal) adjustment when editing your header. I would like to line up my logo and menu with the content of the website instead of having it randomly jutting off into the margins. Toggling the Element Spacing (Horizontal) in the Site Style panel moves it into the right direction but unfortunately only allows me to put in a maximum adjustment of 48px. The attached screenshot has this at 48px and you can see where it stops. I'd like to adjust it beyond that so it lines up nicely with the content of my site but I'm simply not alowed to for some reason. I'm not very comfortable with injecting code into my site but I assume there is simply no solution unless I can wizzard a magical code into the CSS and understand how to apply it. If someone knows a non-coding solution to this problem please let me know! I'm not even sure how to pull up the CSS for my header specifically so if anyone could give me a simple breakdown it would be much appreciated. I'm currently using a very altered Mojave template.

Site URL: http://torgo.work Hi I customized the portfolio alignment, it’s works fine at desktop, but it looks strange in mobile because the text breaks. Anyone knows how to fix this? tks ✌️

Site URL: http://www.piliweeber.com Hi there, On my homepage I would like to move the text that reads "Production Designer" under "Pili Weeber". In the editor "Production Designer" is labeled as the Body and "Pili Weeber" as the Branding. The page itself doesn't allow for customization so I think I need to inject code that would alter the layout! If anyone could help it would be much appreciated! Thank you, Nazila

Site URL: https://www.blvd.vet/ravenswood Hello, I'm in the process of putting virtual tours for each of our locations on our site. The tours are hosted by Real Vision, and while they work well on the desktop site -- they don't optimize for mobile. Spacers don't work, at least not on both sides. I can add one to one side, but the addition of the other essentially breaks the page and/or it's not even recognized. Here's the page in question: https://www.blvd.vet/ravenswood Any thoughts, suggestions or comments are extremely appreciated!

Site URL: https://www.preppingdeals.net/ I would like the thumbnail to be aligned with the text instead of being in the top left corner. Here is my CSS for the blog on mobile: //Compressed cards on mobile @media only screen and (max-width: 767px) { section[data-section-id="61492bcc660b1e207c51c415"] { .blog-basic-grid--container { flex-direction: row !important; >div { &:first-child { width: 30% !important; img { width: 100% !important; height: auto !important; } } } } .blog-article-spacer { display: none; } .blog-basic-grid--text { width: 100% !important; } } }

Site URL: https://vuvuzela-clownfish-z3mh.squarespace.com/ Hi! I'm using a portfolio layout Hover: Follow Cursor. And I need to align all my portfolio projects titles to the left both on desktop and mobile. Password: clownfish Thank you in advance!!! 🙏

How can I change the image poster text padding and apply it on mobile format? It looks good on the desktop site but the text are missing in the mobile version.

Site URL: https://emilie-iggiotti.squarespace.com/the-truth-in-you I saw this effect recently on a website (https://www.violahillstudio.com/) where the contents of two columns are vertically centered without using spacers. I've tried inspecting the code of the website and can't figure out how to achieve the same effect on a client's website. URL: https://emilie-iggiotti.squarespace.com/the-truth-in-you Password: emilie What I'm trying to do is in the index where the image block and text block appear beside each other, I would like to vertically center align the contents rather than have them align to the top of the index and have this effect maintain down to a screen size of 640px, after which the blocks stack on top of each other. I would ideally like to achieve this without the use of spacer blocks. I've attached an image that might help to explain this better. Any guidance would be greatly appreciated!