Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'images'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hi, I am a newbie here. All I want to do is to add an SVG image that I personally made into the body of my squarespace website. So as some expert advised, I uploaded the file (sample_1.svg) and wrote code as follows but it never works for me. It is just all white, no image appears. <img src="/s/sample_1.svg" alt="Image Name">. SVG image is this. Is it because the image is too large or the above code is wrong? https://static1.squarespace.com/static/60c0d9648069a8296f8a576b/t/6100ea5acc0dff2044e6f5f3/1627449948554/sample_1.svg I would be really appreciated if anyone could help me. Thank you!
  2. Site URL: http://www.studiojci.com/ Hello! I am currently creating a Cover-Page for our website and I was wondering if it was possible to stop the auto-scroll feature for the images and add big arrows to the middle left and right sides where people can navigate through the images instead. For reference I am using a Squarespace 7.0 Avenue Family template so I cannot do a blank page and full bleed gallery block which I assumed would have been my alternative. I am also using the TRADE layout as my cover page. Thank you for any and all help you may be able to provide!
  3. Site URL: https://www.treeartstudio.com/welcome Hey! Im trying to get separate images on my site to appear side by side (two colum) on mobile view. I have tried several codes that were suggested on the forum but nothing seems to work.. There are 3 sections on my main page i need to get on two columns (images below) Please can anyone help me out? Thanks in advanced 🙂
  4. Site URL: https://www.sherriedickinson.com I'm trying to re-create the slideshow animation the homepage below has with no luck. Can anyone help, please? Thank you! https://outset-la.com
  5. Hello all, I am currently working on my first site and I'm having some issues with adding a border to my product images. I would like the product categories and product pages to feature bordered images and have been working with this code: img { border: 2px solid black; } However when I enter this, only the left side and top of the image feature the black border I need and don't wrap around the entire image. Any help would be much appreciated. Kind regards, W
  6. Site URL: https://www.blueridgeresearch.com Hello, and thank you in advance for looking at my question. I am looking for CSS code that will create a dark mask and white "Learn More" button on images when hovered/tapped. The images are inside a Summary block. The code can create this action and apply to ALL summary blocks, rather than using a specific id for each one. Please see screen shot below to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I currently have the Summary Block title link disabled. I am using the Burke template. Here is an example of page that I'm working on. https://www.blueridgeresearch.com/home-1
  7. Site URL: https://www.heynibras.com Hi all, I'd like to round the corners of the images displayed on my homepage in the gallery/portfolio thumbnail section. I've scoured the forums and tried all the CSS solutions suggested in the answers so far but nothing seems to work. Would love and appreciate some help 🙏🏽 Thanks!
  8. Site URL: https://endive-denim-89ds.squarespace.com/resorts pw: 1404-Hello Hi community, I have made a wall of images on my page that looks great on desktop, but feels way too long on mobile. I would like to display two images per row (kind of like an instagram page) for mobile screens only. I have tried with the code below that targets the section only, but it doesn't put the images side by side... Any help is appreciated. Thank you ! @media screen and (max-width:767px) { div#page-section-5fd63cbbc4373837b905ef57>.row { display: float; justify-content: space-between; align-items: center; width: 50% !important; float: left; }}
  9. Site URL: https://www.diegocalvophoto.com I'm using the momentum template that has a hero carousel on the home page that scroll thru images, I created a gallery yo feed the carousel and it works fine at the desktop but once I load it on a mobile device it does not work. The images are not being called dynamically and pre-fetched, once I open the gallery and it calls on the thumbnails the carousel works fine. It seems that it is that initial call to pre-fetch the images so that the carousel can present it. But it only happens on mobile.
  10. Site URL: https://apricots-buffalo-ce65.squarespace.com/ Hi! I'd like to add arrows to the images (currently in slideshow style) on my product page but would ALSO like to keep the little gallery on the left side (refer to image). It seems that squarespace only lets you have the little gallery without the arrows and vice versa. Can anyone write a code to add arrows to a SLIDESHOW style listing. Please make sure the arrows are black, because white ones wont work on my listings (which have white backgrounds). Thanks so much! (password: 123)
  11. Site URL: https://raheracreative.squarespace.com/ Password: studio@raheracreative Hello, Im still in the process of designing this webpage, but I want a image to scroll pass at full width. I tried to use a modified version of this code: https://codepen.io/heymagruder/pen/pbKgGj , on the home page top banner. The image however isn't showing as full width. I want the clouds to float by with no edges showing. I have used my own cloud image https://static1.squarespace.com/static/60fe0b14cd76e61f9a397ca8/t/60fe150d9ea4691d98fa166b/1627264274340/Rahera+Creative+Banners_clouds.png This is the code I used in a code block on the home page: <div id="back"> <div class="cloud"></div> </div> <style> #back { background: no-repeat center center fixed; height: 50vh; } .cloud { background-image: url('https://static1.squarespace.com/static/60fe0b14cd76e61f9a397ca8/t/60fe150d9ea4691d98fa166b/1627264274340/Rahera+Creative+Banners_clouds.png'); background-position: 0px 0px; background-repeat: repeat-x; height: 100%; opacity: 0.8; } @keyframes cloud { 100% { background-position: -1900px; } } .cloud { animation: cloud 100s linear infinite; } </style> And this is the code I used in the custom CSS // Home page - Cloud Image Size // div#block-yui_3_17_2_1_1627264387252_6900 { padding-left: 0; padding-right: 0; max-width: 100%; } sorry if its butchered - still learning.
  12. Site URL: https://moneymoves.com.au Hi, I'm trying to target a pecific image card block to my site https://moneymoves.com.au There are three things I'd like to be able to do. 1. Center align the button only (Squarespace offers the option of changing the alignment of the text AND the button, but I want to keep the text left aligned and the button centred). 2. Make the button the full width of the container. 3. Add a little padding to the text/button in the image card. At full-size it's perfect, but at any other size, including mobile, the text is on the edge of the image card. I've successfully targeted other single elements before but finding this tricky. Let me know if you need any info from me. Thanks, James
  13. I had a section of the Eldridge template that I needed to use CSS on but in mobile view some of the content is missing. I used this: [data-section-id="60eb14c12a6f785f58475deb"] { min-height: unset !important; height: 502px !important; margin-left: -115px; margin-bottom: -80px; margin-top: -30px; overflow-x:hidden; #block-yui_3_17_2_1_1627326216187_10647{width:1290px} #block-yui_3_17_2_1_1627326216187_10647{height:493px} } and it made the desktop section look how i needed it to (reference images attached). I needed all of the white space surrounding the top and bottom of image to be gone so that the image was the size of the section. But now in the mobile view, the text to the right of the image is cut out and the only way I can seem to bring it back is by not hiding the x overflow. but then the site scrolls to the right and i need that text to be under the image in mobile view instead. Does anyone know how to fix this?
  14. Site URL: http://www.blossomcreativeagency.com Hi! I had to add the below code to custom CSS to get the images (brought in from Canva) to show up properly on mobile, and while it works great, there's now a giant gray space beneath the images that I can't figure out how to get rid of. Thanks for your help! @media screen and (max-width:640px) { .homepage .section-background img { width: 100% !important; height: auto !important; } }
  15. Site URL: https://atelierwit.com Hii! I've tried everything in the book but I am getting so frustrated with SS's responsive design, I basically just want my website to be displayed on the mobile version the same as it is on the desktop version. I already applied this code to make the background header appear smaller on mobile but it doesn't look that great because the text underneath is now is huge compared to the image. /* mobile-top banner */ @media screen and (max-width:767px) { body.homepage article section:first-child { min-height: unset !important; height: 43vh; } } Also I really want galleries in the original form (less height and more images displayed), text / image blocks to appear next to each other like I designed it with the desktop site and my product pages to not stack underneath each other but have at least 2 columns. If it's not possible, any other tips to achieve the look that I want with the 3 main problems I have would be so helpfull aswell! Thanks in advance 💗💗💗💗
  16. Site URL: https://apricot-minnow-acst.squarespace.com/member-areas-4 Hi Everyone, I'm having an issue with an image looking strange when I am viewing the page on mobile. I am happy with how the "Freebie" block looks on desktop: ...But when I resize it on mobile it looks very small height-wise: The other blocks resize to an almost square shape and I would like something similar for the freebie bloack. Is there a way to achieve this when resized? Thanks!
  17. Site URL: https://youtu.be/W_NbDVisMWQ Hi Everyone, I would like to present website screenshots in my portfolio and template store on my website. See Video link - Does anyone know how to do this? Thanks
  18. Site URL: http://www.piscesaccounts.co.uk Hello, I have created a website for a client, there is a background video in the top banner of the home that displays nicely on desktop but on mobile is showing only partially. I tries with a fallback image but then the fish was showing super big when loading the page and then it goes into the video showing partially the fish, so there is really no substitution of the video for the image in mobile. I tried with a fallback gif and the same problem happened. This is also happening when I use an image as a background banner, in mobile version it shows only partially. Does someone know how to fix this issue? Would it be possible to have the image / video centered somehow in the mobile version? Many thanks!
  19. Site URL: https://www.anglicandoma.org/messenger-articles/a-transformative-experience-for-teens Earlier this week I was able to insert images into text in my blog posts but the past two days...NOPE. Here are two videos showing you what I am seeing. And another link is my successful attempt on Monday. Using Chrome...how else can I problem solve? https://www.loom.com/share/c78db50802944a259f05082e4472bb36 https://www.loom.com/share/9c291f6d8172436e89c51e21f720f86b https://www.anglicandoma.org/messenger-articles/a-transformative-experience-for-teens
  20. Site URL: https://lobster-ray-g42d.squarespace.com/k-farmer-foundation Hello One small issue I cannot seem to fix is in the MOBILE version of my site I would like to reduce the size of the type in the Image block with a collage. I managed to adjust it for the normal desktop version as well as for tablet, but I cannot seem to get this code to work for mobile! Any hints? Thank you! PW: youcanenter this is the code I have been using, to no avail! @media screen and (max-width: 767px) { #block-c52eda86fd78a01e48e6 .image-title-wrapper * { font-size: 15px !important; } }
  21. Hi, the images on my squarespace site recently started displaying strangely. Difficult to explain so I'll attach a pic, but basically a product image will display as a kind of 'double exposure' of 2 other unrelated product images. Not always the same one, if I refresh, it'll happen to a different one. Appears to only be on desktop. Anyone ever seen this before? Any idea what could be causing it? I've tried clearing my browser cache (chrome). Only happens on my squarespace site, no other pages I've visited. I'm stumped! Thanks in advance.
  22. Site URL: https://avocado-triceratops-knpn.squarespace.com/ Hi! I'm building a site in 7.0 and I'd like to feature image 'stickers' around it like it is done here https://flourshop.com/ I've tried using image blocks mixed with spacer blocks but the format is too linear to achieve the effect I want. Is there any custom css code I can use to manipulate the size and position of image blocks so I can have them float anywhere within the main index section? Maybe even overlap between index sections or over text blocks? Site URL is https://avocado-triceratops-knpn.squarespace.com/ password: toocute
  23. Site URL: https://www.oxphozstitchworks.com When I load any product from my store, the location where the product images used to be is blank. Please help. I have not changed any setting. This has just occurring on its own. Is there a simple setting or feature that I need to adjust? Thank you for any help with this matter. www.oxphozstitchworks.com Best, Ryan
  24. Site URL: https://grasshopper-apricots-3r3r.squarespace.com/whoweare On this website, (password: ah) we have a banner image with blue arrows. On mobile, you cannot see this image, the arrows do not show - we want the image to show on mobile. On desktop we want the image to not get cropped. Please help. @tuanphan @bangank36 (Password: ah)
  25. Site URL: https://raspberry-ladybug-nhm8.squarespace.com/config/pages Hello, I'm trying to figure out if there is a way to resize some of the photos for the mobile version and tablet. My homepage looks terrible on these two versions. and the flower doesn't look so great either. the images are too cropped. How can i have a smaller version of the images that fits fully Thank you.
  • Create New...