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. 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?
  2. 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
  3. 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
  4. 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
  5. 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):
  6. 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.
  7. 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; }}
  8. 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.
  9. 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.
  10. Currently, my gallery switches from desktop layout to single-column mobile layout at 640px or less. I would like it to switch to mobile at 767px or less. Is it possible to achieve that with CSS? My website URL: https://alan.photo Thank you in advance.
  11. 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
  12. Site URL: https://www.grahammarriott.com/ I'm trying to overcome the lack of ability in SS 7.1 to set the mobile breakpoint. I can't seem to find a way to keep the desktop header, with Site Title on left and Navigation on right. I only want the hamburger on mobile devices, not on iPad in portrait. Header background is transparent... New to 7.1 here, any and all help is greatly appreciated. Thank you!
  13. Site URL: https://debrarbryson.com/book-reviews Hi Everyone, Is there a way to make the word "It" appear on the same line as "...could be a life saver." on mobile ONLY? It looks fine on desktop, but a little weird on mobile. Perhaps a page break between "...new country." and "It..."? Thank you so much!
  14. 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!
  15. Site URL: https://www.ultimategearlists.com/ I am using Squarespace 7.0, with the Five template. The link to my site is: https://www.ultimategearlists.com/. My desktop navigation menu has grown, and now has too many elements to fit in a single line when viewing on a narrower desktop or a tablet. I would therefore like to use an arbitrary breakpoint (say around ~1200px) below which the navigation bar changes to a right-aligned hamburger icon and clicking on the hamburger icon will produce a drop down navigation similar to mobile. Unfortunately the breakpoint for switching from desktop navigation to mobile navigation (i.e. hamburger) appears hardcoded in the Five template, at 640px. So I likely need to use custom CSS to get around that. I have tried various custom CSS approaches based on other forum posts, but none seem to work. Perhaps since they aren't suitable to the Five template. Any assistance would be much appreciated!
  16. 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?
  17. 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
  18. Site URL: https://www.poncardas.com/blog/understanding-color-theory Hi all! I'm new to Squarespace and so far I'm quite satisfied with how my personal website looked both in Desktop and Mobile. However, it looks horrible with Tablet, especially when it's landscape view. My question is, is there a way to simple change the breakpoint of my website? I did searched about this problem but only found a solution for 7.0 version. As far as I can tell, using Chrome's devtool it shows that the current breakpoint is 768px which triggers only for mobile but what I want is to adjust it to iPad's screen width so I will have the same Mobile and Tablet view. I've seen viable solutions for this problem, but it would require custom CSS and adding many different classes inside it. I'm just wondering why Squarespace has removed the ability for users to change the whole breakpoint which was possible with the older version? I hope my question makes sense.
  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://www.timfowkes.com/barbie-creation-station If you look at the linked page you can see the image below the primary banner (filmstrip of the brick and mortar store). This image is starting to crop on the left and right well before a tablet or mobile responsive break. Instead, I'd like it to reduce in size so that the entire image stays on screen up until the mobile break point. More fluid than responsive, if you will. Does anyone have a tip or css code to support this, it's driving me nuts! 🙂 Thanks! -Tim password: Help!
  21. 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
  22. I really need help with this. I can't figure how to force a single column layout for ipad. I want the mobile layout to be the same on ipad. Can some one provide me with the correct CSS code for this?
  23. Site URL: https://orchid-deer-93zh.squarespace.com/ Hi, As you can see from my website, I have 3 markdown-boxes next to each other with different background colors. When you view the website on mobile, they go nicely on a stack, but when you view the site on a tablet they are uneven and look horrible. I was first thinking is there a way to have a fixed height for these boxes? Would that be a good option? Or - can I change the mobile breakpoint so that they go on a stack on a tablet as well? And how would I do that? Thanks in advance!
  24. Site URL: https://www.lynxwriting.com Hi there, I'm working on this website: https://www.lynxwriting.com with a portfolio landing page. The breakpoint works fine on desktop where the titles are in one line and also on mobile, where it breaks into 4 lines. On a tablet, the 4 titles break into 2 lines with 3 titles at the top and one at the bottom which looks not nice. How can I make it break to either 2 titles at the top and two at the bottom or into 4 lines? Cheers!
  25. 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
  • Create New...