Jump to content

Search the Community

Showing results for tags 'breakpoint'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • Welcome to the Forum
    • Customize with code
    • Commerce
    • Feedback on Your Site
    • Images & Videos
    • Pages & Content
    • SEO
    • Products
    • 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. Hi, I would like certain sections on my homepage to go to the mobile version at wider break points than they currently do. For example on the homepage I would like the Meet the Team section to break to the mobile version earlier. Can any help me with the code I need to use to make this happen. Thank You!
  2. I'm building a site in 7.1 with Fluid Engine (which is great 😀) but it doesn't look great on tablet screens, especially when viewed in portrait. On mobile's it's great as the new mobile view editing option means you can reorder elements - which I love. I'm thinking if I can just make it switch to the mobile layout sooner, ie for ipad portrait width, then it would look great on tablets too. There doesn't appear to be a mobile breakpoint setting in 7.1 as there was in previous versions and the CSS I've found online doesn't seem to be working, is there some CSS I can add that will adjust the mobile break point in 7.1 sites built with Fluid engine? Many thanks in advance to anyone that can help!
  3. Hi, can somebody give me the most widely used screen size's used on your media queries please? I'm struggling to get my site to behave as it should on iPhone's, Android phones, tablets and desktop. Every blog and website post has different screen sizes stated in their breakpoint media queries Also, should I always use min width as well as max width? Or just one of them? Your help will be greatly appreciated! Thanks
  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. Site URL: https://blackrockortho.com/home-v2 I'm having some weird issues with buttons in Fluid Engine on a new site I'm working on. When scaled down to a tablet size, the button in the hero image gets offset and goes partially off the screen. I also have a button getting cut in half for no apparent reason in the footer? Has anyone else been having issues with Fluid Engine buttons and/or have a solution? Thanks!
  6. Site URL: https://artisanchiropractic.squarespace.com/ Hey all - What's a code I could use to adjust the main banner image and text for a website I'm designing? https://artisanchiropractic.squarespace.com/ // PW: artisan See screenshots for the overlap I want to fix. I want the text to be legible while at least having a better alignment on the image. Any help is appreciated!
  7. 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!
  8. 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!
  9. 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!
  10. 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
  11. 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
  12. 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?
  13. 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
  14. 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.
  15. 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.
  16. 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.
  17. 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!
  18. 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
  19. 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!
  20. 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
  21. 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
  22. 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
  23. 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?
  24. 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
  25. The Fulton template doesn't feature a customizable breakpoint in Site Styles but I want to adjust the default mobile breakpoint for the template. I've tried some custom CSS but I seem to be missing something (see below). It's not throwing any errors but it's not switching to the mobile menu at 1300px. Help, please. @media only screen and (max-width: 1300px) { #mobileNavToggle { display: inline-block; } }
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.