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

Search the Community

Showing results for tags 'layout'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 41 results

  1. I have a incorrect right-side gap on mobile screen. (throughout the pages.) I probably made some mistake when I customized the code but does anyone know how to fix this problem?
  2. Site URL: https://www.nickbarr.co Hey, Square Space must have done some sort of update, my mobile site now displays the images in blocks of two now, used to be one. Anyone know how to change this back to a single image in a row?
  3. On my website, I have placed full page-width images and a colored footer that also spans the page width. However, when I scroll to the right of the page, there is a white stripe/margin space on the right that was originally out of view. Does anyone know why this extra space is on the website, and how to remove it?
  4. Site URL: https://capao.squarespace.com/our-story Website password is capao I'm looking for assistance in changing the position of some blocks within a row for mobile view. I'd like all the images within this row or section to have all the images on top of the text. I've tested the following style but I can't figure out how to target the row with the 2 block I'd like to switch. display: flex; flex-direction: column-reverse;
  5. Site URL: https://plantain-tuna-r92h.squarespace.com/ Hello, I am having difficulty writing custom code to layout specific blocks when viewing in mobile. I am trying to make the image on the right, appear before the text on the left when viewed on mobile. I have included some images below to illustrate how the site currently looks on mobile. The first image shows the desktop view while the remaining images show the layout when viewed on mobile. I would love to have the image (printer) appear on top of the text. The block ID for this is #block-yui_3_17_2_1_1592845583541_26222 Let me know if you need any further information, any help would be greatly appreciated. Kind regards, Andrew
  6. Site URL: https://www.mattnaylor.com/ I'm trying to customize the project thumbnail layout like the attached image using CSS grid. This tutorial shows how to do this for a previous version of squarespace but doesn't work for 7.1 (which I'm using). I'm not able to make the project layout 1 column (squarespace editor allows 2-4) which might be why CSS Grid isn't working but I'm not sure. If something other than CSS Grid works for this that's cool, whatever works. My site is mattnaylor.com password: pencil Here's the code I was trying: #gridThumbs { .grid-image-inner-wrapper { display: grid; grid-template-areas: "big1 big1 small1 small2" "big1 big1 big2 big2" "small3 small4 big2 big2"; } article:nth-of-type(1) { graid-area: big1; } article:nth-of-type(2) { graid-area: small1; } article:nth-of-type(3) { graid-area: small2; } article:nth-of-type(4) { graid-area: small3; } article:nth-of-type(5) { graid-area: small4; } article:nth-of-type(6) { graid-area: big2; } }
  7. Site URL: https://www.whitewillowphotos.com/ I want my buttons toward the bottom of my website in mobile view to be side by side. I tried and I can't find the answer.
  8. Site URL: https://cod-aqua-4bdk.squarespace.com Hi! I'm trying to figure out how to reorder my image blocks in mobile view. On desktop, the images are arranged as such (which is how I want it): ➀ ➁ ➂ ➃ But on mobile, the images are displayed in a different order (vertically): ➀ ➂ ➁ ➃ Is there a way I can force mobile view as this? (vertical scrolling) ➀ ➁ ➂ ➃ Help is very much appreciated!
  9. Site URL: https://www.whitewillowphotos.com/ Is there css code to make my navigation look like this website for mobile only? http://arianatennyson.com/
  10. Site URL: https://www.whitewillowphotos.com/prices-packages-new hello, I want to know how I can put different text blocks/images/buttons side by side for the mobile look? for example, I want these three buttons over top of each image. https://www.whitewillowphotos.com/prices-packages-new
  11. I want to have the services 1 section but multiple times, so instead of a 1x3 grid I want 2x3 or 3x3.
  12. Site URL: http://studiobarnhus.com/ Hi, I'm in the process of helping some friends with a website. Solved most of it but this one seemingly simple thing is jacking me. I want a page (blog page) to have 1 column with the blog and one column with a social block (instagram). How can this be achived? I've manage to put them on the same page by adding the feed to the specific header of the blog page. I've scaled them both down to 45% width but I can't get the instagram to float right. When inspecting the code I can seem to edit the top level of the instagram feed to be acctually 45%, is this the problem? If someone knows how to do this, I'd be super happy for any advice. password for the site: barnhusstudio12q All the best!
  13. Site URL: https://www.tycaws.com/ Hello all, I've come across a small issue on the 7.1 store and wondering if anyone can help where squarespace chat can't! On the desktop version of my site the product info shows above the button but on mobile it shows the info below the button which firstly isn't consistent and secondly doesn't help the customer (Screenshots attached). I'm wondering if there is any code that could sort this issue? Thanks in advance 🙂 Owen
  14. Site URL: https://www.strengththerapyfitness.com/ Thank you for looking. Really interested in improving website. Willing to exchange feedback. Please let me know where you think I can improve? All constructive criticism welcome.
  15. Site URL: https://potato-sphere-g3k8.squarespace.com/config/?_ga=2.119541697.850092482.1588391025-1714686847.1588391025&_gac=1.49627794.1588740301.EAIaIQobChMI1bfD5rae6QIVUT2tBh207QNTEAAYASAAEgKCKvD_BwE Hi! Anyone know how to make our product page here have a better format? Here's our page: https://potato-sphere-g3k8.squarespace.com/config/?_ga=2.119541697.850092482.1588391025-1714686847.1588391025&_gac=1.49627794.1588740301.EAIaIQobChMI1bfD5rae6QIVUT2tBh207QNTEAAYASAAEgKCKvD_BwE Is there a way to create something like this: https://blueprintprep.com/mcat/practice-exams/6-mcat-practice-exams @tuanphan Website: naonow.com Password: naonow
  16. Hi, I have written multiple blog posts that can be seen on the left hand side of the screen, but the main page on the right is empty - 'no blog posts'. I was just wondering, is this because I have saved all my blogs as a draft (I'm not quite finished with them)? If I 'publish' them in the settings (my actual website will remain unpublished for the moment), will they then show up on the main page? Thanks.
  17. Hi, Just wondering if someone can provide CSS for the header button to move to the centre of the page. Ideally looking to have; - logo far left - button middle - menu right Thanks team
  18. Site URL: http://www.harrisoncarto.com I have code blocks on my website and would like to make overflow text scroll on mobile rather than wrap. I've included the following code, which works for desktop windows but not mobile ones: pre, ul, ol, dl { font-family: courier; line-height: 1.3em; overflow: auto; } I've also included a picture of what the code looks like on mobile. Any help is appreciated.
  19. Site URL: https://www.richarmitage.co.uk Hello, I'm in the process of creating my first Squarespace site as a photography portfolio For my portfolio I am using the hover background setting as the layout. I want to have 9 categories to the portfolio, and I need them to be displayed evenly in a 3x3 grid as you can see in the attached image. I had to edit the font style and sizes in order to get them to display like that, I had a very hard time doing this though, it feels like Squarespace make it incredibly difficult to do something so simple, is there no easier way to format this? So after finally getting it to look how I want on my 15" laptop, I checked on a larger desktop and the projects were a mess, not in the 3x3 grid I had created. Is there a way I can make this stay consistent through different monitors, I hope there is an easier solution. I have attached screenshots of how it looks on my laptop and on a larger monitor. I am using Squarespace 7.1 so no theme richarmitage.co.uk Password - richarmitage
  20. Site URL: https://manatee-antelope-5jfz.squarespace.com/ I'm currently working on a site which has a Canadian and a USA version. I REALLY need to duplicate this site and now I see it's just for Circle members. I only have two active sites so, I cannot become a Circle Member yet. I'm hoping someone can help me here, if not, I might have to redo the whole site for USA customers. I'm crying 😭
  21. Site URL: https://www.thislandisdigital.com/ Context: I've spent some time trying to apply a custom grid layout to my index so that I can highlight certain projects with double sized thumbnails. To do this I followed this tutorial which targets an index: gallery block from a different template rather than the standard index I have available in Avenue (not sure if the scaling is different because of this). I was able to successfully assign an area to each of the index thumbnails and arrange them the way I wanted using grid-template-areas with one main issue. Problem: The thumbnails are forced to match the aspect ratio in my site style rather than cropping or stretching to fill the grid's literal space. What I want is to have a combination of 2/1 and 1/1 aspect ratios. My site style can be one or the other (50 or 100). No matter which I choose, the grid is being stretched vertically to match the same ratio. Here's my code so far. I'll deal with the tablet and mobile arrangements when I solve the desktop issues. #collection-5c89d82aee6eb05083075575 #projectThumbs { > div { // Create a grid layout on the index. display: grid; // Visually map the named items below to the grid using spaces. Repetition matters. grid-template-areas: "firstAB firstAB firstCD firstCD" "secondA secondB secondC secondD" "thirdA thirdBC thirdBC thirdD" "fourthA fourthB fourthC fourthD"; @media screen and (max-width: 800px) { //grid-template-areas: ""; } @media screen and (max-width: 640px) { //display: block; } } // First Row a:nth-of-type(1){ grid-area: firstAB; // Name of the item. } a:nth-of-type(2){ grid-area: firstCD; } // Second Row a:nth-of-type(3){ grid-area: secondA; } a:nth-of-type(4){ grid-area: secondB; } a:nth-of-type(5){ grid-area: secondC; } a:nth-of-type(6){ grid-area: secondD; } // Third Row a:nth-of-type(7){ grid-area: thirdA; } a:nth-of-type(8){ grid-area: thirdBC; } a:nth-of-type(9){ grid-area: thirdD; } // Fourth Row a:nth-of-type(10){ grid-area: fourthA; } a:nth-of-type(11){ grid-area: fourthB; } a:nth-of-type(12){ grid-area: fourthC; } a:nth-of-type(13){ grid-area: fourthD; } } I attached a picture of the result I want vs. the result I'm getting. * I had to temporarily revert my site to a standard 4-wide index and comment the CSS out. Didn't want to leave my site up in a broken state while I wait for a solution (it requires a 1-wide index for some reason). I was able to reduce the visible size of specific images, but only the image element and not whatever larger element it's attached to (still new to CSS). Hopefully the screenshots and my code will be enough to get a hint or direction.
  22. Site URL: https://www.xn--litterrsalong-8fb.net Hi everyone! I'm currently in the process of setting up a page, with a teaser page currently online. The site will be a compilation of several texts, videos and audio-recordings as part of an arts project. We were originally planning on setting up a show in May, but those plans got cancelled for obvious reasons. Instead we'll publish them online. I've currently looked at the "blog" layout, which seems easy enough, but I was wondering if I was overlooking som good layouts or designs. Preferably the design would be a minimalistic list of posts containing one work each. Any input?
  23. Site URL: https://flugelhorn-wolf-5fb7.squarespace.com/test I want to add embedded media to my webpage. for example purposes think of it as a youtube video. When it's added for some reason the size and dimensions of the content is weird. How do I adjust the height and width? It's responsive when I change the screen size but when it's on the normal webpage (like a laptop) it's more of a square shape instead of a rectangle and cuts off some of the stuff when it's played. it distorts the content a bit. The spacer blocks let me change the width but I can't adjust the height for some reason. Is there a way to adjust this?
  24. Site URL: https://feelgoodsociety.fr/adresses Hello I have created a guide using a Blog page. As you will see on the URL, each "place" has its own blog post. I also added a map to localize the places, in the intro box (only place where i could add a map) and some filters at the top of the Blog box. Thus map and filters are "not in the same box." However it's not great in terms of UX. Right now I have map at the top, filters below, and then blog posts at the bottom. I would like to have my filters at the top and blog posts aligned with the map below - posts on the left, map on the right (like classpass UX - cf screenshot). I have tried to take out filters from the blog post but it didn't work. I have tried to create a map outside the intro box. Didn't work either... Does someone know how I can do that? Thanks a lot for your help. 🙏 Sophie
  25. Site URL: https://experimentalbitchpresents.com/the-company-new Hi all, Do we know when/if Squarespace will finally let us do mobile editing separately and independently of editing for desktop? I always have trouble with mobile because the layout of how it looks on desktop doesn't align in the way that it should on mobile. It would be AMAZING if we could have this feature like Wix does. For instance here's my current desktop page: https://experimentalbitchpresents.com/the-company-new# And on mobile it lines up the wrong names to the wrong images. Please note that the names are in code boxes because I have a lightbox-textbox that is appearing when clicking on their names. I'd like to have a funky desktop design like I have but it would be amazing to have the ability to line up the different text/codeboxes with the right images on mobile. If anyone has any other insights on how to solve this issue currently without changing the desktop layout please let me know.
×
×
  • Create New...