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

Search the Community

Showing results for tags 'breakpoint'.

  • 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: https://www.edits.net/ I'm using squarespace 7.1 and the mobile menu breakpoint is set to 1025px rather than a standard 768px. This doesn't look good on a tablet or in a small browser window. I've tried adding media queries, and resizing the logo and menu items to fix the issue to no avail. Has anyone else encountered this issue or found a fix? I remember in previous versions being able to set the breakpoints within the design settings, is this no longer an option? Please help!
  2. Site URL: https://weave.net.nz/contact Please help! My form fields are not displaying correctly, I have forms on 3 pages and on each of those pages the same problem exists. I removed all the css code section by section to narrow down the issue. I've narrowed it down to the media breakpoints code (below) but I can't figure out why it's happening? @mobile:~"only screen and (max-width: 750px)"; @desktop:~"only screen and (min-width: 950px)"; When i remove those two lines of code it breaks ALL the css in my site? Any help would be greatly. These break points are also really helpful because I have used it alot throughout to display/not display content on mobile and desktop. Site password: W3Ave2022!
  3. Hi All, I am just starting to use squarespace to build my first website! I want to incorporate the mobile menu on desktop and have figured out how to force it. However I wanted to inquire 3 things: 1) whether the mobile menu on desktop be coded to display different width, fontsize, alignments etc. versus mobile view? 2) can .header-actions {display:none} be modified to show some/selected items instead of "none"? 3) how can i get the dropdowns to appear "below"(this.jpg) versus another menu opening to the right (not this.jpg) as depicted in the following pictures: Thankyou and looking forward comments and feedback!
  4. Site URL: https://www.sebsadlerportfolio.com/ Hi there, I am having some issues trying to change the size of my video that's on my home page for mobile. It looks great on desktop, and the height of the section is large. When I switch to mobile it was too big and I have tried to change it to medium which looks perfect on mobile, but it ends up changing it for the entire site. Can anyone help with some custom CSS. Thanks everyone
  5. Site URL: https://unchartedtrvl.com Hi there! Just want to say that Squarespace's support has been out of this world with my first experience thus far using it. I've hit a bit of a wall trying to figure out why my site, on mobile, still acts like it's on a desktop. When loaded on mobile, it seems fine at first glance. However, the breakpoint seems "broken" as the horizontal scroll reveals way more than needed and zooming out shows a nearly desktop version of the site. Any help? https://unchartedtrvl.com Thanks!
  6. Site URL: https://sonjamutterer.squarespace.com/home-v3 Hello again, I'm still lost with another problem. After a screen-with of 1990px the margins and padding and font-sizes dont behave accordingly to the Styles in the settings - in terms of em and vw. Do I have to define another breakpoint for that? I will attach two screenshots that show the problem. The Elements don't seem to resize anymore properly. First and third Screenshot show what it should look like and second and fourth where Paddings and margins and text-style misbehave. Can anyone help?
  7. Hi Squarespace Friends, I spent hours combing through the forums for a solution on how to make website content stack on tablet like it does on mobile for Squarespace 7.1. Unfortunately, I never found anything that actually worked the way I wanted or needed it to. I realized that so many other people have this issue so I told myself I was going to be the one to solve it and I did. All you need is a little bit of CSS... Please note, I'm not an expert in CSS and I didn't know how to make this occur for every page at once, so the code would need to be used repetitively for the different pages (#collections) you have. Here is the code: @media screen and (min-width:768px) and (max-width:1180px) { INSERT #COLLECTION-ID HERE .col { width: 100%; display: flex !important; flex-direction: column !important; } .sqs-layout .sqs-block-spacer { display: none !important; } .image-block { width: 60% !important; margin: auto; } } Explanation of the code: The first part of the code is used to target what screen sizes you wish for your content to stack at or in between. You can see in my example that I am only targeting screen sizes 1px above the standard mobile breakpoint in 7.1 and up to a 1180px. If you wish to content stack at an even lager size then just increase the 1180px number in my code to a size of your own choosing. Please also be sure to update the code with your own collection id or else it will not work. The second part is used to remove all spacers you may have used on your page. This is commonly done by default at the mobile breakpoint in 7.1. If you wish to keep your spacers then just remove this part of the code. The final part is used to reduce the size of all images on the page. I found that without this part, most images are too large as you force the content stack. If you wish to keep all your images large then just remove this part of the code. Please note that "margin: auto;" will center you images like in my photo result. You can use left and right CSS commands to adjust this. Here is the transformation: In this example you will also notice I centered all the text. To do this just target the desired text class with a media query and match the "max-width" property to the value you used in the code above. Here is an example: @media only screen and (max-width: 1180px) { p { text-align: center; } } @media only screen and (max-width: 1180px) { h1 { text-align: center; } } @media only screen and (max-width: 1180px) { h2 { text-align: center; } } @media only screen and (max-width: 1180px) { h3 { text-align: center; } } @media only screen and (max-width: 1180px) { h4 { text-align: center; } } Hopefully this helps the community and works for everyone. Thanks, Branden
  8. Hi, I'm working on a website and wanted to know if there was a way to embed an image through html code and then using media queries, once the screen is decreased to mobile size the the current image (x) changes to a different image (y). How would I go about doing that?
  9. Hi, Thanks to this forum, I have been able to assign how many thumbnails per row display on mobile and tablet by adjusting "%", however, since it is by "%" and not by number per row, changing 9 across to 5 or 6 results in rows not having the same number of thumbnails....so I would like to at least center the grid thumbnails. Not sure if I am assigning the centering in the right place, as it's not centering. TABLET VIEW FOR: https://www.no-frames.com/nf-home > Clients section (div#block-4c0ecb71fe65b1f517d7) *Also, not sure why video is not appearing at the top of the page on tablet and mobile
  10. Site URL: https://www.no-frames.com/nf-home Hi, I have some pages with video as a background banner on my site. I am want the video to be aligned top of the page, behind the logo and nav, which is why I am using the background banner....but it only displays and plays on desktop. Brine 7.0
  11. Site URL: https://www.henryfrakes.co.uk/ Hi there, bit new to this but been working on my site but it has a couple of issues on mobile wondering if anyone could help? The pages have either a landscape hero banner or carousel on mobile but it gets cropped to portrait cutting off most the image on mobile, is there a way to avoid this? I would also ideally like the title of the site to be on two lines rather than one, like Henry Frakes Photography There is also some off-spacing in the menu navigation and really not sure what is causing that? Sorry for so many questions! If anyone could help would be amazing. thanks! henry
  12. Hey guys :) I made my portfolio on a 4k display with a scaling factor of 175% in the windows 10 display settings* - no browser zoom. On that display, it looks like I want it to look (look at image 1). When I look at it on a 1920px display with a zoom of 100% it looks quite similar, though a little bit bigger. But when I saw it on a 1920px laptop screen that was on 125% scaling during a portfolio review, the proportions of the text and images were way too large while the white space was too small (look at image 2 - imagine this being full screen 🙈). *If it is unclear what I mean by the scaling factor, I mean this: https://youtu.be/t9xIbkD6XjQ?t=30 What do I do in such a case? I cannot decide the screen size of the HR person I send the portfolio to, so it should look good on every screen size, no matter if 4k or 1920px, and no matter the windows scaling factor (at least it is quite normal to have a scaling of 125% on a 1920 laptop screen and 150-175% on a 4k display). Is it possible & smart to set a zoom level of the browser depending on the screen size and windows zoom level? Or can I add additional breakpoints? Thank you so much for your support in advance! :D Image 1 (on 4k full screen): Image 2 (looks terrible on a laptop in full screen):
  13. 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.
  14. Site URL: https://mcnaegroup.squarespace.com/config/ Website: https://mcnaegroup.squarespace.com/config/ Password: studio@mcnaegroup1 I have a H1 heading which looks great in a full window, and in mobile view...but if you make the desktop window slightly smaller the text suddenly jumps bigger. I thought changing the tablet text size might help but i had no success. Can any one help? //mobile text size// @media only screen and (max-width: 767px) { h1 { font-size: 35px !important; line-height:115% }} //tablet text size// @media screen and (max-width: 960px){ h1 { font-size: 35px !important; }}
  15. Site URL: https://www.xystema.com/ Hi! I am trying to break a line text into 2 and I want the first line font-size bigger than the 2nd line. Attached the screenshots of what I am having now and what I want to happen. Website details: www.xystema.com password: 061298 I will appreciate any help. Thanks so much.
  16. Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home Hello I currently have some code that I am using to display one header section for Desktop, and switch to another header section for Tablet and Mobile. The reason behind this is that my first design for Desktop does not look good on mobile. The code also allows me to see the sections in 'edit' mode making it a lot easier to tweak the design if I need to. Here's the code: /* HOME - HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS 768px OR LESS*/ @media only screen and (max-width: 768px) { body:not(.sqs-edit-mode) section[data-section-id="5fec522cbb6ff82c0aae7a7f"] { display: none !important; visibility: hidden !important; opacity: 0 !important; } body.sqs-edit-mode section[data-section-id="5fec522cbb6ff82c0aae7a7f"] {opacity: 0.5 !important;} } /* HOME - HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS GREATER OR EQUAL TO 768px*/ @media only screen and (min-width: 768px) { body:not(.sqs-edit-mode) section[data-section-id="5fedd1a50db4f45ccb5e94ae"] { display: none !important; visibility: hidden !important; opacity: 0 !important; } body.sqs-edit-mode section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {opacity: 0.5 !important;} } I noticed today that if I resize my browser down to 768px, my homepage is blank (see attached image). Have I missed something in my code? I believe iPads breakpoint is at 768px so I just want to be sure my page is visible across all breakpoints. Please help. Many thanks, Best, Faiz Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home Pword - bluebird
  17. I'm somewhat new to CSS, and can't figure out how to set a wider maximum width for the mobile version of my site. I don't like how my header breaks into multiple lines for medium-sized screens. My template is Impact. Thanks so much.
  18. Site URL: https://www.welcome-to-utopia.de/blog/blog-post-nine-kn2al-t0WSV Hello, I attached a screenshot for better understanding... The word "Pilzwurzelrevolution" is too long for a small screen. I would like to break just this one word so it shows like this: Pilzwurzel- revolution anytime the screen get's too small. Any idea how i can target this? I only know how to break the word using ­ but now Idea how to target this blog title / pagination link... Thank you.
  19. Site URL: https://paddlefish-blackbird-g477.squarespace.com/home 7.0 website I cant seem to get my mobile banners to adjust on mobile. Here is an example of the homepage banner on mobile, ideally I want the image with the logo to be resized/centered. I have tried inserting this CSS: @media screen and (max-width:600px) {.Index-page--has-image .Index-page-content { width: 100% !important; height: auto !important; }} https://paddlefish-blackbird-g477.squarespace.com/home pw: balance
  20. Site URL: https://noll-demo.squarespace.com/ I love how my site looks with the NOLL template, but everything looks clunky and unrefined real quick after the first breakpoint, which is usually when I view my site on tablet or with a narrowed web browser. Problem The main problem for me is the unnatural increase in font size. It becomes almost twice as large than my default font size after the first breakpoint. Desired Solution SOLUTION 1: Make the tablet version / first breakpoint version of my website look like the default full screen browser version. SOLUTION 2: Use custom CSS to adjust the font size within the first breakpoint. However... is this even possible? I’ve tried to Google this but I’ve found nothing on how to fix it. I understand some other theme templates have breakpoint customisation within the settings panel, unfortunately the NOLL template doesn’t have this so I’m hoping for some CSS code to fix it under the hood. Thank you to anyone that can help!
  21. Site URL: https://ruby-dinosaur-xmr3.squarespace.com/config/design In Squarespace 7.1 , I would like my desktop website to switch to stacked content (mobile view) at approx 1100px wide instead of the default value. I've seen many examples in the forum that deals with the navigation bar only but in my case I want the whole site to switch to stacked view (images and text boxes). How can I do this ? I've tried multiple CSS so far but none has worked. Thanks. password to the page : helloiro
  22. Site URL: https://star-fennel-h9p3.squarespace.com/ Hey! I have a split navigation on my site. I'm using both CSS and Code injection the issue i'm having is setting the breakpoint - once the screen is smaller the logo ends up aligning to the right. Code Injection: <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer'); $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle(); $(".markdown-block .sqs-block-content h3").click(function() { $(this).nextUntil("h3").slideToggle(); $(this).toggleClass('ui-closed ui-open'); }); }); </script> CSS: /*Make split navigation*/ .header-nav { position: absolute; top: 50px; bottom: 0; margin-top: 0!important; margin-left: -50px!important; } .header-nav-item:nth-of-type(3) { margin-right: 440px!important; } .header-title-logo a { z-index: 1000; position: relative; } See screenshot of issue! Thanks so much!
  23. Site URL: https://www.acnetkleen.com Hi, My website is acting wonky and is showing the "Hamberger menu (mobile) " on desktop. Sometimes when you play with the window width the normal menu comes back. It should look like the attached screenshot. (Note: There are no options in the Theme back-end to adjust mobile) The website is: https://www.acnetkleen.com Theme is: Bryant I need to reduce the breakpoint OR remove the "Hamberger menu" on desktop completely (or both!) I've tried various codes from other posts/forums on here but nothing works as I think the theme I am working with is too old. Any help would be much appreciated! Thank you and best health
  24. Site URL: https://www.jamesfryimage.com/ A problem has been noted when the site is viewed on an iPhone 12 max pro, which has 6.7 inch screen. The Desktop view seems to kick in at sizes bigger than 6.5 inch. What is needed is the site to be in Mobile view mode at sizes up to say 7 inch, to allow for these bigger mobile devices. Would some code be possible to force Mobile view at browser sizes 7 inch and below, instead of, the at present 6.5 inch and below?
  25. Site URL: https://www.mike-scott.co.uk Hi, I'm creating a site on desktop and since it's a portfolio that's the main way it should be viewed, but if people do view it on mobile i'd rather it just reduced everything rather than be responsive in the way it currently works, i.e. cropping and moving things, but not resizing. I don't have an issue with the index page or the profile page and the way it adjusts for mobile, but If you click in to a project page for example https://www.mike-scott.co.uk/projects/studio-ageli you will see how, on smaller screens, it just crops into the images, so you lose a lot horizontally of course, but not vertically. All it would need is a way to constrain the proportions, either entirely or to a greater degree. I don't know if I'm describing this clearly, but one other way I was thinking of it is that, below lets say 1000px, for a project page, ideally it would resize each element to the width, and stack the elements like it currently does, whether image, text or space. So on a tall thin device like a mobile you'd see 3/4/5 images and text all at the same time. I'm not a coder, so if anyone can help or suggest ways to solve this problem please have a look. Any ideas? New to squarespace... thanks in advance! Mike
  • Create New...