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

Search the Community

Showing results for tags 'columns'.



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


Badges


Expert ID

Found 53 results

  1. Site URL: https://www.core4.com.au/home-1 Hi there, Squarespace 7.1 user. I am trying to make my code block with the 3 results column view for desktop but they are stacking on top of one another. Does anyone know why my code keeps stacking rather than sitting next to each other? Also why the icons arent appearing. Screenshots attached and code below. HTML <div class="content-103"> <div class="container"> <div class="row"> <h2 class="sercies-title">Our Awesome Services</h2> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-share-alt"></i> </div> <!-- service-icon --> <h3 class="service-title">Advertising</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-pencil"></i> </div> <!-- .s-icon --> <h3 class="service-title">Branding Design</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> <div class="col-md-4 col-sm-4"> <div class="service-post"> <div class="service-content"> <div class="service-icon"> <i class="fa fa-lightbulb-o"></i> </div> <!-- .s-icon --> <h3 class="service-title">Creative Marketing</h3> <p class="service-description">Seitan brunch meh, food truck Wes Anderson quinoa XOXO readymade gastropub gluten-free heirloom wolf skateboard.</p> </div> <!-- service-content --> <div class="service-hover"></div> </div> </div> </div> </div> </div> CSS .content-103{ background: #f3f3f3; padding-bottom:50px; } .content-103 .sercies-title{ text-align:center; padding: 50px 0; } .service-post { background: #fff; padding: 30px; text-align: center; cursor: pointer; position: relative; z-index: 12; margin-bottom: 30px; -moz-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.08); } .content-103 .service-content { position: relative; z-index: 13; } .content-103 .service-icon { margin: 10px 0 20px 0; width: 50px; height: 50px; border-radius: 25px; text-align: center; border: 2px solid #eb7a5c; margin-left: auto; margin-right: auto; line-height: 50px; -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-icon { border-color: #fff; } .content-103 .service-icon i { font-size: 18px; color: #eb7a5c; } .content-103 .service-post:hover .service-icon i { color: #fff; } .content-103 .service-title { font-size: 16px; font-weight: normal; margin-bottom: 15px; -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-title { color: #fff; } .content-103 .service-description { -moz-transition: color, 250ms; -o-transition: color, 250ms; -webkit-transition: color, 250ms; transition: color, 250ms; } .content-103 .service-post:hover .service-description { color: #fff; } .content-103 .service-hover { position: absolute; top: 0; left: 0; z-index: 11; width: 100%; height: 0px; background: #eb7a5c; -moz-transition: width, 250ms; -o-transition: width, 250ms; -webkit-transition: width, 250ms; transition: width, 250ms; } /*hover-background-color effect*/ .content-103 .service-post:hover .service-hover { height: 100%; } Thank you
  2. Hi all, I'm using the Paloma template for my website gohoopday.com. If you scroll down to the sixth fold, you'll see tons of logos. On mobile, these stack (1 per row), which isn't very mobile-friendly. I am trying to get 2 or 3 per row for mobile. On a previous site with a different template, I used a formula similar to the ones listed in the link below, but on this template it's not registering. https://forum.squarespace.com/topic/64554-create-more-than-2-columns-in-mobile-for-grid-gallery/ I've tinkered around and tried this, but it only pushes the logos to the left rather than creating 2 columns. @media only screen and (max-width: 640px) { .gallery-grid-item { width: 50% !important; } } I am wondering if it is because this is a gallery page vs an image gallery. Anyways, I cannot figure it out - please let me know if you can help! Max
  3. Site URL: https://submittolove.squarespace.com/ Hello I am trying to get pages where I have created columns with spacer blocks or by having images and text side by side, to stack underneath each other, they do on a mobile but on a tablet they remain in columns. I also need this for a page where I have used a summery block displaying as a grid which i would like to stack underneath each other rather then a row of 2. These are the pages: https://submittolove.squarespace.com/contact https://submittolove.squarespace.com/the-team https://submittolove.squarespace.com/projects-landing-page This is the password to view the site as it's not live yet... submit*
  4. Site URL: https://www.casegoods.in/ Good morning, password to reach the site : CaseGoods_C3 I'm trying my best to make a landing page with a relatively complex layout (with the help of spacers that would work well on all devices (screen, tablet, phone) but I'm not very happy of a few texts columns that are nice and wide on the screen version but become to narrow on the tablet version. The phone version automatically resize everything for the screen width so no issues with that version mostly. Therefore I would like to try making the tablet version exactly like the phone version with all blocks rearranged one after another to see if it's visually better. I tried messing a little bit the "mobile breakpoint" parameter in the Site Styles but it only affects the Header, not the content of the page. Attached images of the current 3 versions of the landing page. Is there a simple way to make this trial via the custom CSS ? I'm working with the Brine template.
  5. Hello So, I was adding the prices for the products in my website. Now I want to add another column - number of pieces. Now it does add but on the UI it comes as a drop down. Is there a way to not add that as a drop down and it just shows the value as it is. Thanks in advance!
  6. Can someone help me understand why this five column section isn't sizing evenly? What kind of CSS should I insert to fix this? URL: https://caper-robin-ljl7.squarespace.com/agri-best-supplements pw: strauss
  7. Hello I am trying to get pages where I have created columns with spacer blocks or by having images and text side by side, to stack underneath each other, they do on a mobile but on a tablet they remain in columns. I also need this for a page where I have used a summery block displaying as a grid which i would like to stack underneath each other rather then a row of 2. These are the pages: https://submittolove.squarespace.com/contact This is the password to view the site as it's not live yet...
  8. Has anyone had any coding luck maintaining two columns at the 576 breakpoint when using the masonry grid? I've found plenty of answers for the grid-only, but not masonry. Is this even possible based on how the images reorder at that size? Thanks
  9. Site URL: https://www.boutique14.co.uk/home1 Hi, trying to configure the footer navigation. I am happy with a centered stacked layout on desktop, but on mobile it's all bunched too closely together and I'm concerned about accessibility because the links are too close together. It would be good if on mobile only I could either space the links out more, or use columns. I'm messing about with this CSS: @media screen and (max-width: 640px) { .Footer-bottom { layout: columns } } It doesn't work. Could do with some help please. Thank you.
  10. I am building a site for a client with 5 image cards, and he wants them to be in a single row. I am having trouble with custom CSS to make the columns even. Anybody have a snippet of code that would work?
  11. Site URL: http://www.intotheblackpines.com Hello @tuanphan, Im sure youre tired of the same question but Im also having trouble reading your code on youtube and honestly having a hard time figuring out the elements in my page to add the css. Id like two columns in all three pages of my shop folder instead of the one column. Can you or anyone please help thank you! password to view website is jogajh89
  12. Site URL: https://tigerfeetboutique.com/ Hi, I'm trying (and struggling) to add columns to my mobile website instead of having the standard vertical stacked blocks. To be more specific I'd like to add these columns to the category images on my homepage (ideally I'd like these as 2 rows of 3 columns), and all products on my mobile site (2 columns). Any help would be much appreciated! https://tigerfeetboutique.com/ p/w is tigerfeet100
  13. Currently trying to make the shop page display products in 2 columns on mobile devices running theme on 7.1 I have used the below code but it forces all products to half the screen and on one column? any help will be really appreciated @media only screen and (max-width: 750px) { .products.collection-content-wrapper .list-grid { width:50% !important; clear:right !important; padding-right: 5px !important; padding-left: 0px !important; } .product-image a{ width: 100% !important; } }
  14. Site URL: http://araraswim.nl Hello all, I would like the mobile version of my website to have two columns on the product pages instead of one. How could I do this? thank you very much in advance.
  15. Site URL: http://www.ronlewhorn.com I'm trying to limit the number columns to 2 maximum on the flatiron theme. I only have 4 pages and hate when it jumps to showing 3 wide and the 4th becomes a sad little orphan. :) Thanks!
  16. Site URL: https://www.maryscholten.com/copy Hello, I would like these two columns (the "my experience" column left and the body copy column right) to be the same height even as resolution changes. So instead of looking like this (screenshot from my site): It looks more like this (design I am trying to mimic):
  17. hi there! is there a way to add more responsive steps than 'screen', 'tablet' and 'mobile'? for better understanding: on an imac the grid has 5 columns ->ok! on an tablet 3 ->ok! but in between there are no options and I would need less columns on a laptop compared to a large imac screen. ... anyone? Thanks!
  18. Site URL: https://drcreative.squarespace.com I followed these exact directions for a boxed-in footer: https://thirtyeightvisuals.com/blog/boxed-footer-squarespace But the mobile code isn't working. This is the exact code I have in CSS editor: @media screen and (min-width: 640px) { .Footer-inner { display: flex; } .Footer-blocks--top, .Footer-middle, .Footer-blocks--bottom { flex: 1; display: flex; flex-direction: column; justify-content: center; border: 1px solid #ddd; padding: 20px; } } .Footer-inner { display: flex; } .Footer-blocks--top, .Footer-middle, .Footer-blocks--bottom { flex: 1; display: flex; flex-direction: column; justify-content: center; border: 1px solid #ddd; padding: 20px; } This is what it looks like on mobile view. Why????
  19. Site URL: https://www.andrewmarston.com/photo On this page is there a way to main the 2 and 3 column layout of the 7 images at the top of the page on mobile devices? Currently in portrait orientation on my smartphone the page switches to displaying the images full width. I've been wrestling with various media queries for awhile now but the Squarespace code always overrides me.
  20. Site URL: https://pelican-ellipse-jp5e.squarespace.com/ I’m trying to figure out how to put my icons in two columns on mobile view. I’m not a pro at css so I need some help. Also, would I just get code to separate them and then input it into “ custom css” or would I do inject code? i want it to look like this website when on mobile. www.lexy.co.nz/
  21. Site URL: https://commonfarms.com/edible-plants-of-hk-vol-1 I wanted to create three columns of text side by side, so I used three content blocks. On desktop the columns look fine, and they are reshuffled correctly on top of each other on mobile. However, on tablet view the columns do not preserve the right look of the text and squeeze each other to one side. Would appreciate any advice on fixing this issue. desktop view tablet view
  22. Hi everyone! I have a problem with the mobile device view of my page. I have some pictures. Every picture has a text on the right side. In the browser, everything looks good. But on the mobile screen, shows me first the pictures and then the text. Please help me, what can I do? Sorry for my bad english, I am from Switzerland :) Dominique Looks on iphone :( Looks on macbook :)
  23. I am currently working on a site using the Forte portfolio format and while text format works on a computer screen it fails to do so on mobile. I have my text organized in a column format and the issue I am experiencing is that on the computer you can read column 1 and column 1 where as on mobile it reads column 2 and column 1. Could anyone please help with this issue? It would be most appreciated.
  24. Hi, please see attached screenshot. I would like my SHOP menu folder to be in two columns with work for sale on the left (Sand Dunes through Books) and information about the work and additional items on the right (About Our Prints through Give the Gift of Art). Right now it is one long menu. At one point I searched this forum and someone posted custom CSS that broke folders into two columns. You could select which drop-down folder to turn into columns and how many columns. This was a great start but you could not determine WHERE the break occurred, it simply broke it up evenly so if I had more than 3-4 pages the product pages would spill over into the information column and be included on the right instead of the rest of the works on the left. Regardless, the link is now dead for this post and so I can not find the CSS script. Basically: I would like a custom CSS that allows me to always have my work for sale separated from the information about the work and make it manageable to sort related works/locations into columns in the future. Ideally, I would have a mega menu with ways to view collections by popularity, theme, etc. but that seems beyond SquareSpace's capabilities at this point (like so many things...). See second attached.
  25. Hello, I'm trying to add more columns in the Footer section of Avenue template but even though I've tried some workarounds, it doesn't seem to work. Is it at all possible? My goal is to offload the main navigation to the Footer - any other ideas would be very much appreciated. The URL is: www.onebreath.eu Thank you!Myrto
×
×
  • Create New...