Search the Community

Site URL: https://www.thebeautifulproject.org/about-our-programs Hello! I have been running into an issue with an image I embedded onto a page. The reason the image is embedded to start with is because it's an image map and I want people to be able to click the elements on our map to learn more about them. I'm able to see the image map fine on desktop, but on the mobile site, the image seems to be overflowing and creating a much wider page than I desire. I would love if someone could help me with some code to keep the image within the container on mobile by putting the image into a horizontal scroll. I don't desire to make the image smaller, I just want to put the image map in a scroll container to keep the normal width of the mobile site. I would also love a scrollbar for people to see. Below is the code for the image map I have placed into the embed block. <!-- Image Map Generated by http://www.image-map.net/ --> <img src="http://thebeautifulproject.org/s/PROGRAM-PIPELINE-medium-1476-750-px.png" usemap="#image-map"> <map name="image-map"> <area target="_blank" alt="Black Girl Imagemaker Workshop" title="Black Girl Imagemaker Workshop" href="https://thebeautifulproject.org/black-girl-imagemaker-workshop" coords="188,227,429,252" shape="rect"> </map> Thank you to anyone that can help!

Site URL: https://vintanthromodern.com Hello-- I'm currently in the process of upgrading an existing site from 7.0 to 7.1 for a small business. I would love if my shop landing page could redirect to all of my shop categories and have customized landing pages for each category (clothing, home decor, new arrivals, kids, etc.). When I had a section to a store page, it shows up on every page of my store besides individual product pages. Help! Essentially: I want my Store to have a landing page with images/redirects/etc. but don't want those elements to show up on the actual store category pages.

Site URL: https://www.sandravfeder.com/angry-me There's a few sections where the content wrapper seems to be larger than the width of the page, and so when it resizes the content doesn't size down enough and is cut off on the edge of the screen. I tried removing all my css and that didn't fix it, so I'm not sure what's going on. I included a few screenshots but it's definitely easier to see on the live site - only happens at certain screen sizes though. It's happening in a few sections, these are the ones I've noticed so far - "The Fun Stuff" section at the bottom of the homepage: https://www.sandravfeder.com/ "School Visits" section on this page: https://www.sandravfeder.com/presentations and "Additional Content Related to Angry Me" on this page: https://www.sandravfeder.com/angry-me If anyone knows how to fix this I'd be very appreciative:)

Site URL: https://www.alisonedgar.com Don't know if this is a bug as it worked before, but I'm currently unable to see the whole of my top section on mobile. I've attached screenshots but it may be best to look at the website directly. Does anyone have any suggestions where I may be going wrong? Appreciate any help in advance 🙂

Site URL: https://plantain-mustard-p42a.squarespace.com/ I'm trying to add something like this custom background found here https://codepen.io/MAKIO135/pen/BbqLgR to the first section of my home/landing page of my website. My steps that I've tried Add a blank section Create a code block Paste the HTML scripts Add my own <script></script> and paste the javascript code inside that This all works and it shows up on my page, it's just not in the specific section that i want it. It adds it to the bottom of the page (it goes below my Footer). Is there a way to contain the code to the specific section that I created? Any help is much appreciated. Thanks in advance!

Site URL: https://joeredski.com/store/workshops Hi there, Please can you help. Is there anyway of adding line breaks between specific content in the Product Description section on a Store page? Pressing enter, once or numerous times, does not add spaces. Thank you in advance.

Site URL: https://sparhawk-plus-gary-cashman.squarespace.com/safetalk Working on a site using Brine. I want to create cards containing individual text and image blocks (see attached) and I'm not sure how to go about it. Using image blocks seems really clunky but maybe that's the answer. I'm surprised I've never run into this before in Squarespace, but it's such a basic HTML function. This conversation from 2019 seems to solve the problem in a better way, but I don't know how to find divs, only block IDs Page is https://sparhawk-plus-gary-cashman.squarespace.com/safetalk and if you scroll to the footer, the newsletter blocks are another area I'd like to have in their own container so I can style it differently (attached).

Site URL: https://www.unserekleinepotfarm.com/bloggen I have 4 buttons that I need to put inside a container as my image shows. I've been trying to figure out how to do it but I have failed miserably. Any ideas? thanks

Site URL: https://matthewkoscica.com/play#/ikebana/ For some reason, all of the sudden my main contents doesn't stretch to 100%. Only when creating new pages. Old pages remain 100% stretched. Does anyone know what this if from? You can see it in the linked page, compared to all other pages on the site. Thanks!

Site URL: https://jimgoldberg.fr/ Hi, Everytime I click on any clickable element of my website a thin dotted line surrounding the object appears. (image attached) Would anyone know how to remove it using css codes ? Thanks in advance for you help 🙂 WEBSITE PASSWORD : Segura70

Site URL: https://shop.jonathan-gallagher.com I'd like some text to fill the entire width, from edge to edge of it's container without needing to input a specific font-size, as this container is responsive. As you can see below, the text box is 20% of the width of the block it's in. the other 80% being a carousel with 4 images, so essentially creating 5 squares of equal size. I hope the 5th one can be filled with a couple of words of text. The 80-20% ratio and number of carousel images, will modify with media-queries to suit different devices #join-in .sqs-col-9 { width: 80%; } #join-in .sqs-col-3 { width: 20%; } #join-in .sqs-col-3 h1{ max-width: 100%; min-width: 100%; font css here? }

Hey all, I am trying to create a specific effect for my website. I have an image and on Hover I would like to display a black overlay on slight transparency+some text formatted in a specific way. I tried to do it with the Squarespace default way but I couldn't manage so I tried to use the HTML+CSS customization but still I am struggling. Something with the way I am specificing the text size based on the vw is breaking things. Any help? Adding video and image This is the CSS .container { position: relative; width: 50%; } body { font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; padding: 2vw; background-color: rgba(0,0,0,0.7); } .container:hover .overlay { opacity: 1; } .Title { color: white; font-size: 5vw; position: relative; text-align: left; } .SubTitle { color: white; font-size: 3vw; position: relative; text-align: left; } .Synopsis { color: white; font-size: 2vw; position: relative; margin-top:30%; text-align: left; } .credits { color: white; font-size: 1.8vw; position: absolute; bottom: 0.5vw; text-align: left; line-height:70% } .overlay {color: white;} This is the HTML file <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Passione</title> <link href="../css_sheet.css" rel="stylesheet"> </head> <body> <div class="container"> <img src="passione.png" alt="Avatar" class="image"> <div class="overlay"> <div class="Title"> Passione </div> <div class="SubTitle">a John Turturro Film</div> <div class="Synopsis"> <p><p><strong>Synopsis</strong><br></p> <p>Filmed in Naples, Italy, Passione is the fourth film directed by John Turturro and released in the United States in June 2011. The movie chronicles the rich world of contemporary Neopolitan music tracing the influences of European, African and Arabic cultures in a wild, colorful and sexy musical adventure. Passione was present at the 67th Venice International Film Festival, won the Capri Cult Movie Award, the &ldquo;Movie film festival of Salerno&quot; and the City of Loano prize.;</p> <p><br></p> </div> <div class="credits"> <p><strong>Director:</strong> John Turturro</p> <p><strong>Role:</strong> Production Coordinato</p> <p><strong>Release:</strong> June 22nd 2011</p> </div> </div> </div> </body> </html> Screen Recording 2020-08-08 at 14.18.52.mov

Site URL: https://kale-wedge.squarespace.com/ Hello squarespace community! i was wondering if anyone out there could help me with this one, been stumbling along on code but managed to make most things work but this one remains out of my skillset by quite a bit. i have a section on my home page that i can't seem to get to image blocks to the right to stay the same height or flex with the text description section to the right. honestly not sure if its even a flex issue but my coding skills are highly novice at best. Right now i have it set up with image on the left, text section and then a spacer block between rows but when the screen size shrinks, the text stays the same but the image size shrinks dramatically in relation, curious if there is a work around to this at all? attaching a screenshot of what i was hoping to accomplish as well. site url: https://kale-wedge.squarespace.com/ password: sauce section id in question: section[data-section-id="614e4f3444b2e57370c71097"]

I first just want to preface this with the fact that I unfortunately cannot post the website link due to it being for a client project that is a work-in-progress, and do not have permission to make the site live at this time. I am using the Camino template, and on desktop there is a pretty large left/right content padding. When on mobile, this padding translates to a very short line-length, and overall doesn't work well. This doesn't apply to the header or footer, just the content of each page. I am looking to reduce this left/right content padding for mobile only, ideally to the padding that the header and footer have on the site. I would really appreciate any help or guidance! Thanks

Here is a partial screenshot - in edit mode, hovering the mouse over a single image shows extra space on the bottom. The blue container is uniform on the sides and top, but not the bottom. Here is what's currently enabled in the image-edit Design mode: - Inline Image - Captions are turned off - Image is stretched to span the container - Every and all combination (to my knowledge) of these Design choices does not resolve the problem. I'm guessing some code can get rid of it - any ideas?

Site URL: https://alyraymertest.squarespace.com/ Hi there, I'd like to add a border to the nav and index of my site while keeping the footer full bleed. Is that possible to accomplish with CSS? My thought was to add a border in the site styles section but use code to eliminate the border on the footer. Thank you! https://alyraymertest.squarespace.com/ PW: fish123

Site URL: https://www.deborahsabo.com/walls-3 Hello - I am in 7.0. The header is set to be full width, but the content, at lease the carousel on this page is not. I would like to set page content / container to be full width, or for gallery sections to be full width at least. Thanks for any help you can give! Laura

Site URL: https://echidna-gardenia-fcb4.squarespace.com/ I have made a blog post template using Image Blocks, however I am keen to have unconstrained image heights for each blog post so viewers can see the full image. When in editing mode, the images appear with set widths and different heights (which is what I want). However, when viewing the desktop version and mobile versions, the Image Blocks become constrained, cropping each image to fit within the same height box. I have tried altering the container size, image block heights and overflow, however none of these tweaks are working. Examples below and any help would be greatly appreciated! Thank you! Editing Mode - how I would like the images to display using different heights: How images are displaying in the desktop and mobile versions - all constrained in set squares:

Site URL: https://www.cathodetv.com/ https://www.cathodetv.com/ Currently I have a codebox with two iframes aligned left and right. I wan to set the height to be 100% , as opposed to px. When I do, the codebox shrinks my iframes. Width is no problem. How do I increase the height of the codebox with css?

Template used: Classon I'm trying to have the an image in the top section spill into the other sections. This is a mockup for what I want: You can see that the light flare gradually dims into the next section of the page. Currently, I have this: The section border is cutting off my flare. I've tried various CSS code to try to extend the bottom margin, make overflow visible, etc but nothing has worked. My site is not live at the moment so I'm not sure how to give the url. Essentially, I just want to know how to let my spill over the top section border. Thank you!

Site URL: https://www.mbc95.org/welcomecenter I am trying to add a Modal with an iframe in it to an external site on my page. I added bootstrap since I am familiar with it using the following code: <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> When I add this to the header of the page I am on (https://www.mbc95.org/welcomecenter) is causes the page to shrink the size of the container. The page should look like the main page of the site (https://www.mbc95.org/). Is there anything I can change to correct this? Thank you!

Trying to make padding around a text block in a page section MUCH SMALLER. height of page section is way too big, leaving a lot of blank space

Site URL: https://www.whitbycollegiate.school.nz/ Hi there, I want to reduce the height of my slideshow gallery on the homepage banner when displaying on mobile by about 50% but I can't work out how to change this.

Hi, Im using the medium width setting for all content on my site. When I embed a widget from Elfsight, set to display in full width, it stops scaling with the rest of the content after around 950 px. Does anyone know what may cause this issue? Im very thankful for some help here. Thanks, M

Site URL: https://ray-harmonica-ta62.squarespace.com/produkter Hello! I created a site using an online store template. My site is going to show products, but only in a list on a page, I don't want them to be clicked. I don't know how to make the items in the online store module to not be clickable, and to have more text, so I added a section called Pricing with 3 collumns of image, text and price underneath. This is all I want, except I want the three collunmns to be full width like the store-module. See screenshot. Help please? Thanks!