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


Forums

  • 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
  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges


Expert ID

Found 23 results

  1. 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.
  2. 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
  3. 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):
  4. 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!
  5. 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!
  6. 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!
  7. 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!
  8. 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?
  9. 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
  10. 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.
  11. 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.
  12. 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!
  13. 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!
  14. 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
  15. 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?
  16. 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!
  17. 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!
  18. 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
  19. 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 it breaks into 2 lines with 3 titles at the top and one at the bottom. How can I make it break to either 2 titles at the top and two at the bottom or into 4 lines? Cheers!
  20. Is there a way to customize with CSS mobile breakpoint? I mean, customizing the pixels where it switch to mobile view. Thanks for the help ๐Ÿ™‚
  21. 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
  22. 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; } }
  23. 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.
ร—
ร—
  • Create New...