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
    • Resources
  • 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
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: http://www.onyxmodelmanagement.com Hi, I need some help with my site. I've tried a few codes but nothing has worked so far. On my index page, I have a lot of image blocks that are in four columns on my desktop site view. They are individual image blocks, not a gallery. On mobile, it stacks all of the images on top of each other and it is too much scrolling. I would like to have two images per row on mobile view. Here is the link to the page I'm trying to fix: http://www.onyxmodelmanagement.com/rocket-city-1 This is what it looks like on desktop: Here is what it looks like on mobile: Here is what I would like it to look like on mobile: Can anyone help? Thank you!!
  2. Site URL: https://www.ambergchen.com/ I'm trying to add a drop shadow transition (ease) on hover for the images on my homepage. For whatever reason, it works on the images that are left-aligned, but not on the right side. Pics are attached for reference but you'll be able to see it in action on my site 🙂 Pass: WIP Thank you in advance! Below is my code for the image hover: .design-layout-overlap .image-inset { transition-property: box-shadow } .design-layout-overlap .image-inset:hover { box-shadow: 0px 8px 12px #E0DDDC; transition: .2s ease; }
  3. Site URL: https://www.drewdepinto.com/about Hi all, I used a card image block for this page on my site, since using image and text blocks side by side created too much space in between the two. On my screen the image and text are about the same height and width, but on other screens the image is much larger than the text. I tried changing the image width in site styles, but I don't want the text to be much wider than the image. Is there a way to fix the image size for a card image block, or another way to preserve the image to text ratio? Thanks!
  4. Site URL: https://restoredformoms.com/ Hello! I've included two screenprints below. Can someone please advise how to change the image for the event list to be square? When you are on the site and you select: "events" + "upcoming events" Those images are 1:1 (square) Select any event Select "back to all events" Then shows a diff view of the events (not 1:1) This different view is where you will notice the images are cropped on the top and bottom for the "Restored Play Date" as the designed images are square. It doesn't look like I can change to square and do not know what else to do? Thanks so much!
  5. Hey I noticed when I add a link to the image when using the overlap image block, it appear different on other displays than normal image blocks. I want the bottom (which has an image link) to look the same as the top. How can I achieve this? Thanks
  6. Site URL: https://sprout-dragonfly-f48x.squarespace.com/ Hi there, I'm implementing an image in my website that I need only at 25 % of its size. On the desktop version I just implemented some empty space next to it to resize the whole thing. However, on mobile the image appears full screen. I resized it via CSS to max-width of 25 % but it's either possible for all images (than it works fine but all other images are just as small) or I target only the specific image with data-image-id but that's not working. It resizes the image but the whole container stays the size of the full size image and therefore creates too much space underneath the now smaller image. I've used this CSS code: @media screen and (max-width: 640px) { [data-image-id="60e8168657d2352c927ec54d"] { max-width: 25%; max-height: 25%; } } In the attachment I show you a screenshot of what it looks like now on the website. I also attach an image of what I want it to look like (if I address all images it works perfectly but not when I try to address only the one). Thank you for your help! Sarah
  7. Site URL: https://clover-duck-epye.squarespace.com/config/pages Hi All, I have been struggling with creating a smooth zoom-in hover effect over images (block image poster layout) and a smooth zoom-out when not hovering. This works now which is great. Unfortunately when reloading my page, the images start out distorted and slowly get back to normal (the duration of my hover effect...). Any help would be much appreciated! Thanks in advance! My custom css: /* Zoom on hover image*/ .sqs-block-image .design-layout-poster{ -webkit-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; img{ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 4s ease!important; -o-transition: all 4s ease!important; transition: all 4s ease!important; } &:hover img{ -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } }
  8. Hi there, Can I disable viewers 'dragging and dropping' my jpeg images onto their desktop? I have already implemented code to disable right click (below) ---> <script src="http://ajax.googleapis.com/ajax/libs/jquery /1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script> Is there code that will stop users dragging and dropping images aswell or can the above code be altered? I have seen this done on other sites that use HTML. Many thanks
  9. Site URL: https://elanirving.com/ Hello, I'm actually having 2 issues with one block that I'm hoping to get some help with. Unfortunately I can't remember which type of block it is. First, the images on my desktop display are great, but on mobile they're cropped, huge, and the card blocks the whole image. Is it possible to have the whole image display smaller, but correctly and horizontally, with the card below? Second, Is it possible to make that first block scroll automatically without having to use the buttons? Maybe bullets instead? : Thank you for your help!
  10. Site URL: http://www.macasgardeningservice.com Hi, I have been having scaling issues with the site and my 2 pictures. Using some script from @tuanphan that has fixed the issue with mobile phone and tablets, but trying to use the same code to correct the problem on a laptop or computer doesn't seem to work. The issue is easy to replicate. Opening the page on a phone or making the browser window the size of a tablet or phone will give you the way the images are meant to display on all devices. Resizing the window starts to chop off heads. I have added the same code to the laptop and desktop functions but no matter what values I use the images don't respond to the changes. When I put the code where I have bolded, the images respond to value changes, but the changes only apply for the current size of the browser window. I am looking for a more dynamic way to keep the entire picture within the frame of the browser regardless of size. http://www.macasgardeningservice.com Pass: Fisher07 Thanking you, Bent2Bits <Script> h1, h2, h3, p { hyphens: none; } body#collection-62b6621d5e541e2575ab7882 { .Parallax-item:first-child img { width: 100% !important; left: 0 !important; height: 60vh !important; top: 20vh !important; } .Parallax-item:first-child { height: 100vh !important; } .Parallax-item:first-child figure { bottom: 0 !important; transform: unset !important; } section#home { height: 20vh !important; min-height: auto !important; } } /* CSS FOR TABLET AND MOBILE */ @mobile: ~"only screen and (max-width: 480px)"; @tablet: ~"only screen and (min-width: 481px) and (max-width: 768px)"; @laptop: ~"only screen and (min-width: 769px) and (max-width: 1024px)"; @desktop: ~"only screen and (min-width: 1025px) and (max-width: 1500px)"; /* CSS FOR MOBILE */ @media @mobile { /* Insert Code for Mobile Below This Line*/ /* resize main image for phone*/ h2 { font-size: 19px; } body#collection-62b6621d5e541e2575ab7882 { .Parallax-item:first-child img { width: 100% !important; left: 0 !important; height: 30vh !important; top: 40vh !important; } .Parallax-item:first-child { height: 30vh !important; } .Parallax-item:first-child figure { bottom: 0 !important; transform: unset !important; } section#home { height: 20vh !important; min-height: auto !important; } } /* Insert Code for Mobile Above This Line */ } /* CSS FOR TABLET */ @media @tablet { /* Insert Code for Tablet Below This Line*/ h2 { font-size: 25px; } body#collection-62b6621d5e541e2575ab7882 { .Parallax-item:first-child img { width: 100% !important; left: 0 !important; height: 45vh !important; top: 28vh !important; } .Parallax-item:first-child { height: 45vh !important; } .Parallax-item:first-child figure { bottom: 0 !important; transform: unset !important; } section#home { height: 35vh !important; min-height: auto !important; } } /* Insert Code for Tablet Above This Line */ } /* CSS FOR Laptop */ @media @laptop { /* Insert Code for Laptop Above This Line */ } /* CSS FOR Desktop */ @media @desktop { /* Insert Code for Desktop Below This Line*/ /* Insert Code for Desktop Above This Line */ } <Script> The way I want vs what happens when I make the browser window smaller.
  11. Site URL: https://audreykester.com/omika Hello! I attached screenshots to show my issue. The banner image on my page is zoomed up on when viewed on mobile. Although I don't intend to include the entire width on mobile, I do want it to include more of the image like how it is shown on desktop. Can anyone help with the code for this? I've been trying for days and can't figure it out! Thanks 🙂
  12. Hi, I've created a page of images that is 3 columns wide, 3 rows high. Each image has a text box underneath (I am not using an index page or gallery block because I'd like to have 2 lines of text under the image which isn't possible with either) When the page goes to mobile, the columns are read first, so the order is changed from what it is meant to be (which is from left to right). Would there be a way to have mobile view prefer horizontal order, placing each image from the rows first, rather than the columns? I'm on Avenue template 7.0 Thanks for any help
  13. Site URL: https://www.robertditty.com/ This might not be possible (or too complicated) but I would like there to be a text overlay when hovering on my images on my homepage. The Supply template does this ( https://supply-demo.squarespace.com/shop-supply?category=Apparel ) but I prefer Wells' wider sidebar. As an alternative, if there was a way for the caption to appear on hover in thumbnail mode that would be better than nothing. Or if there is an alternative to the gallery pages that allows this, let me know. Thanks!
  14. Site URL: https://www.floodedandforgotten.com/stories-and-quotes I am in 7.1, and have some photos that are in poster mode, with text overlaid. It looks fantastic in desktop mode, but once in mobile mode, the text ends up outside of the images, and everything begins to overlap. Any way to address this via CSS? I am really hoping so, because I like the appearance in desktop mode. Site: https://www.floodedandforgotten.com/stories-and-quotes Password: F&f1234
  15. Site URL: http://florencehb.squarespace.com/work/project-three-fylys Hi there! I’m having an issue where on the page, the drawing of the four rats should be much lighter. The background is white when I open it in other programs. If I change the layout of the image block so the text is beneath the image, the image appears correctly again. It is in the RGB colour profile, so that shouldn’t be the issue. Does anyone know what’s going on? Here is the original image for reference.
  16. I'm still learning 7.1 after doing a few sites in 7.0. I've created an events collection on a new site I'm working on. The main collection summary page has an image section under the header banner (which then bleeds under the banner, as I want), and before the list of events. However going into a single event page, there doesn't seem to be any way of showing an image in the same way. Ideally I want the event's thumbnail image to show at the top of the page, and bleed under the header banner. Instead all I get is the site-wide colourless banner image. Using dynamic header styling is an option, but not ideal. There seems to be no way to add an image section to the single event page. Am I missing something? Is there a way to make show an event's image on the event page?
  17. How do I make one image appear all over one page? i.e a pic that bleeds into the header and main content page. I can't seem to merge the two. I just want one image
  18. Site URL: https://asianfilmdallas.com/ Hi, We recently switched over to a 7.1 template and I'm trying to figure out how we can create a slideshow gallery in the homepage with the text overlays like I can on the static image like I have right now. I've been searching and I'm having trouble finding a way to do this. Essentially, since we are a film festival, like to have a different image for each of our showcase films with different text for each and a button so people can buy tickets. So just like the static image but with a gallery instead. Thanks for any help.
  19. Hi everyone, I'm trying to change the layout of my "product detail pages". For now, if I upload multiple images it stacks them in a single column (making the page very long). Ideally, I'd like for one image to be large, with smaller images to click on underneath. I know this is the default feature on other templates, but I'm not sure if it's possible to achieve through custom code/CSS? Any help would be greatly appreciated!
  20. Site URL: https://www.st-bede.com/ When you scroll downwards, the menu bar stays put but everyone above it turns invisible. It looks silly just floating there.... How can I make the top logo/search bar area stay put?
  21. Hi, this is more of a general question as it comes up for me time and time again. Is there any way to make Squarespace fit the height or width of an image to the section when used full bleed? I've tried both the following CSS: @media screen and (min-width:767px) {.homepage #page section:first-child { min-height: unset; height: 500px;}} section[data-section-id="62b4162983d8ee6bc8a27cab"] { min-height: unset !important; height: 500px !important;} and it does change the height of the section correctly, but the image just gets made bigger so still crops it off. If anyone can help I'll be eternally grateful!
  22. Site URL: https://www.hortus.com.au/about-5 Hello When in mobile the logo which has been overlayed using the below css is cropped. How do I get it so you can see the whole logo on mobile devices. Password: hortus Thanks Current css: [data-section-id="62b2b5e018398148f72b3fa9"]:after { content: " "; position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: url(https://static1.squarespace.com/static/604008e3f6c0190bbe9903bd/t/62b3f315b15ed050327cec58/1655960341821/Picture1.png); background-repeat: no-repeat; background-position: 50% 50%; }
  23. Site URL: https://horse-onion-layz.squarespace.com I’d like to be able to round all the image corners on my site, could someone please help with with the coding and where to put it exactly? I’d imagine there might be different locations for galleries and thumbnails etc? Thanks very much!
  24. Site URL: https://fiddle-reed-4bh7.squarespace.com/config/design/custom-css More specifically, I'd like like it so that when I hover over a given option on the home page, a png appears beneath the text to underline it. As shown, I've photocopied rough, pen drawings/lines as a stylistic choice. It'd be cool to carryout this style in a number of ways throughout the site. So the PNGs would be of simple lines drawn in pen, but I'd want these lines to appear under each option upon a mouse hovering over that specific option. Take a look at the mockup below. Anybody have any ideas? p.s. let me know if you need help accessing the website.
  25. Site URL: https://www.ljathenaeum.org/mega-events-2 Hello! Site page: https://www.ljathenaeum.org/mega-events-2 I am trying to create a page with an image and a series of linked texts. I want the image to change when I hover over each link. I have added a code block with the texts, links, and images. I have also added the following Javascript: <script> /* Mega menu image change on hover */ $(document).ready(function(){ $('.mural-menulink').mouseover(function() { myvar = this.id; $("div.mural-menuimage").hide(); $('#div'+myvar).show(); }); }); </script> <script> $(document).ready(function(){ $('.mural-menulink').mouseover(function() { myvar = this.id; $("div.mural-main-image").hide(); }); }); </script> The script properly hides the initial image on hover, and it also properly hides the links' images before hover, but it won't show the new image on hover. I don't know what I'm doing wrong! Any help or insight would be greatly appreciated. Or if there is another way to do this, that'd be great, too. Thanks so much in advance! Angela
  • Create New...