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

Search the Community

Showing results for tags 'responsive'.



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
  • Squarespace Forum Club Guidelines'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

Found 28 results

  1. Site URL: https://andreaengerphotography.com/ Hello, I have recently hired a designer to revamp my site. It looks like everything appears to align on her screens. She has a 15.6" laptop and a 22" monitor. I have a 13" laptop and a 27" Mac my screen the design isn't translating the properly. I have follow all the suggestions with the zoom at 100% and clear cache and it looks the same on my end. She chatted with support and she was told to "However, as mentioned, I'm confident this is simply the responsive design. It may be possible to adjust it with custom code. Please note that we're unable to offer assistance or troubleshooting for code, due to their complex nature. Custom code modifications can cause unwanted results when interacting with our platform." i don't want to make this more complicated and add codding that I will be have to get someone involve in the future if I have to make any changes or changes here and there. There is anyway to adjust the design? The layout to fits better all screens? Anyone can take a look for me please? Thank you!
  2. Site URL: http://www.debraschifrin.com I can't figure this out... haven't changed anything since it launched, but it started showing tablet view on mobile all of a sudden. The template I'm using does not support disabling mobile styles. What's maddening is that it displays correctly in Device View in the desktop editor and in the Squarespace app on mobile, but will not display correctly in a mobile browser. Tested on 3 phones using Chrome. Any ideas? Help!
  3. Hi! Can anyone help we with adding more breakpoints for farious screensizes? tablet an mobile might be fine as it is, but for pc screen I definitly need at least one more step in beetween. can anyone help me please? thank you!
  4. 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!
  5. Hoping someone can help! I'm trying to add 3 lines of different weight to the header of my site. I'm using the new squarespace 7.1 I'd like them to appear on mobile view as well. Screen shot of what i'd like to achieve attached!
  6. Hello! So my site is https://earthlycraft.co/ It's almost there... but i cant work one thing out. How to change one of my banner hero images for mobile. It looks great on desktop however its too small on mobile, so i have another logo ready thats zoomed right in that i'd like to use for mobile only. I've added the file in design > custom css > manage custom files so i can use the link to the file I'm fairly familiar with media queries but i don't know the code to change the banner. When I inspect I get this code: .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img Therefore i'm going for something along the lines of: @media only screen and (max-width: 600px) {.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {background image: https://static1.squarespace.com/static/5d00032088447c0001487495/t/5dcdc90c40062f0cf29e9ddc/1573767446853/mobilelogo.png;}} Help would be much appreciated!! Cheers!!
  7. Site URL: https://www.jacobcozens.com/studiomessages Hello, I am looking for some help regarding the width of my footer and page contents (e.g. Project pages, About me, Contact) on larger screens. As it stands if i load my website on a larger screen (attached images are loaded on a 21.5 inch imac) my footer and page contents don't scale to fit the width of my header. This isn't the case for the gallery on my homepage which scales just fine but the footer does not. Just looking for help regarding what custom CSS i could use to fix this? Website: www.jacobcozens.com Password: marley Any help would be great, Thank you.
  8. I'm trying to find away to have any control over the way my background image on my home page is cropped in mobile mode. I would like to either choose how it crops, change the image for mobile style only, remove the image and just have colour, or disable mobile style however disabling mobile isn't possible on the Polaris template. My site is https://www.mallorychipmanandthemystics.com/ Any suggestions appreciated! 🙂
  9. Site URL: http://flowerwalldubai.squarespace.com Hello, Please could someone help me? I've entered the below custom CSS to stop the 'Welcome to' and 'Flowerwall Dubai' text from overlapping, this works fine on tablet and mobile view but has a large space in between on full screen? I'm not sure what to do now? 😥 @media screen and (max-width: 641px) { body { font-size: 11pt; line-height: 20px; text-align: center;} h1 {font-size: 30pt; padding: 10px; } h2 {font-size: 30pt; font-weight: 400; text-align: center;} h3 {font-size: 16pt} #block-2e9f5306c508fa38a436, #block-yui_3_17_2_1_1579636239796_16990 { top: 100px; padding-top:40px; } #block-yui_3_17_2_1_1579640268463_14758 { top: 30px;} } @media screen and (min-width: 751px) { body { font-size: 11pt; line-height: 20px; text-align: center;} h1 {font-size: 30pt; padding: 10px; } h2 {font-size: 30pt; font-weight: 400; text-align: center;} h3 {font-size: 16pt} #block-2e9f5306c508fa38a436, #block-yui_3_17_2_1_1579636239796_16990 { top: 100px; padding-top:40px; } #block-2e9f5306c508fa38a436 { top: -30px;} #block-yui_3_17_2_1_1579640268463_14758 { top: -50px;} } .Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center; }
  10. 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 🙂
  11. I have set up different background images to display on different pages and seemed to have it working, however now working from another computer, the background images on the Home page and Music page are not taking up the full screen. Also, on mobile the Home page is not displaying full screen either. This is the CSS I'm using for the background images on Desktop: #collection-5de6d28545f1a7075b7a2741 #canvas{ max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #collection-5de6d2e045f1a7075b7a34a3 #canvas{ background-position: cover; max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5df035e05d133c6a73380fa1/1576023521067/IMG_1683.JPG) } For Mobile I'm using: @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 .canvas{ max-width: 100% !important; max-height: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } The website I'm working on is richiequake.com, the password to access it is Help123. What I'm I missing in my CSS that the background images are not displaying full screen on Desktop and Mobile?
  12. Hi, I'm using the OM template to create a simple artist page. Most of the page is pretty much set except that on mobile screens the page is not displaying correctly.What I want is for the Nav bar to be underneath the logo, the logo itself to be top and center of the page and for the background images to fill full screen. However, I got this to work briefly but now the media CSS appears to not work. The url of the website is richiequake.com and the password to view it is Help123. UPDATE I have decided to place the logo on the upper left hand and the menu button on the upper right hand side of the website. This is my CSS now: media screen and (max-width: 500px) { #header { float: none; display: block; text-align: left; }} @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 .canvas{ max-width: 100% !important; max-height: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } @media only screen and (max-width: 400px) { .logo-image .logo img { position: relative; right: 100px; top: -130px; width: 60%; //add for good resize based to screen } } @media only screen and (max-width: 400px) { #mobileMenuLink { margin: 0; display: inline-block; //change block to inline position: relative; font-family: "Helvetica Neue",Arial,sans-serif; font-weight: 400; font-style: normal; line-height: 1.2em; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; text-align: center; visibility: visible; left: 70%; top: -2%; } } @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 { } } .page-borders-thick #mobileMenuLink { border-bottom-width: 2px; padding: 5%; // ADD PADDING } #mobileNav { background: none; position: relative; top: 50%; } #mobileNav .wrapper { border-bottom-style: none; border-bottom-color: none; } #mobileNav .menu-open { margin-top: 30px !important; } Now my issue is that I want the menu to open down when the button is clicked. I tried to do this by using the .menu-open class but that did not work. How can I do this?
  13. Hi there. I'm working on a bilingual text on a website. For this I created an English text style (h3) and a Spanish one (h4) with the same specifications as h3, except for a color change, and insert it on the page with a code block. h4 has been set to match the size of h3 on full width but for obvious reasons it won't resize on smaller screen sizes. Any idea how to solve this? Here's a link to the page. Thanks!
  14. I took the Impact Template and customized it slightly for my own, however the text in the "gallery" page section is not responsive - which is quite annoying especially when I didn't change a thing from the templated design originally given to me in squarespace. The problem: The full text area doesn't show up on mobile or tablet - it gets cut off The solution: I need the text in these sections to show up on tablet and mobile as it does on desktop. How can I make this happen? Any idea how to correct this?!?! It's so annoying.
  15. I have a disturbing problem. When using markdowns with the code: <div style="text-align:center"><span style="font-family:AVAYX; font-size:1.8em; color:black">**SOME OF OUR LATEST PROJECTS**</span> The font appear on my computer, but when I visit my site on my iphone the font in the markdown is changed to another.. looks like times new roman or something similar, but not the font that I'm using in the markdown.. What is wrong? Why isn't the markdown show the correct font in responsive view?
  16. Hello, when I visit my website on iPhone the menu icon shows up under the brand logo. But it should be in the right corner instead. What can I do to fix it? My website is https://dove-turkey-3mnz.squarespace.com/ Password: cs
  17. I need help figuring out how to keep the summary block background on this page from being wider than the viewport. It took me forever how to figure out how to get the background to be full-width on desktop. It seems to all be shaping up except for the right side extended past the viewport on mobile devices. I would greatly appreciate any insight. Thank you!!!
  18. Hello everyone, So my problem is when i go into responsive mod my buttons are off the screen and it's not normal. I made a custom css profile to have all the buttons with the same size but now they are not responsive ! The other problem is my custom design buttons that i made in png and integrated them as a image. But in responsive mod they are huge ! Thank you for the help ! Here is my css : /* Remove underline from links */ a { border: none !important; } body p, .sqs-layout .sqs-block.html-block p { text-align: justify !important; } .field-list { .form-item select { background-color: #fafafa; }} .sqs-lightbox-next, .sqs-lightbox-previous, .yui3-lightbox2 .yui3-lightbox2-content { pointer-events: none; } .sqs-lightbox-close { pointer-events : auto; } #nouvelle-page-1 { background: #7E66A5 } .markdown-block p { margin-left:1.5em; } .markdown-block .ui-closed:before { font-family:monospace; content:"★ "; } .markdown-block .ui-open:before { font-family:monospace; content:"☆ "; } .sqs-announcement-bar-text p { text-align: center !important; } .image-block-collage-text-alignment-left .sqs-block-image .design-layout-collage .image-card>* { text-align: center !important; } .sqs-widgets-audio-player.dark { background: #8067a6; } .sqs-announcement-bar { background: linear-gradient(99deg, #ac96ce, #392345); background-size: 400% 400%; -webkit-animation: AnimationName 3s ease infinite; -moz-animation: AnimationName 3s ease infinite; animation: AnimationName 3s ease infinite; } .sqs-announcement-bar-text { -webkit-animation: AnimationName 3s ease infinite; -moz-animation: AnimationName 3s ease infinite; animation: AnimationName 3s ease infinite; } @-webkit-keyframes AnimationName { from{color:0% !important;background-position:0% 51%} 50%{color:50% !important;background-position:100% 50%} to{color:100% !important;background-position:0% 51%} } @-moz-keyframes AnimationName { from{color:0% !important;background-position:0% 51%} 50%{color:50% !important;background-position:100% 50%} to{color:100% !important;background-position:0% 51%} } @keyframes AnimationName { from{color:0% !important;background-position:0% 51%} 50%{color:50% !important;background-position:100% 50%} to{color:100% !important;background-position:0% 51%} } @-webkit-keyframes AnimationName { from{color:0% !important;background-position:0% 49%} 50%{color:50% !important;background-position:100% 52%} to{color:100% !important;background-position:0% 49%} } @-moz-keyframes AnimationName { from{color:0% !important;background-position:0% 49%} 50%{color:50% !important;background-position:100% 52%} to{color:100% !important;background-position:0% 49%} } @keyframes AnimationName { from{color:0% !important;background-position:0% 49%} 50%{color:50% !important;background-position:100% 52%} to{color:100% !important;background-position:0% 49%} } .sqs-use--icon { fill: #8067a6 !important; } .Index-page-scroll-indicator-arrow { stroke: #none ; opacity: 0; } .sqs-block-button .sqs-block-button-element { width: 350px; } @media only screen and (max-width:1400px) { #collection-5cda8559cb2c42000142030b section#le-conseil-1 .sqs-col-4 { width: 100% !important; } } @media only screen and (max-width:1400px) { #collection-5ced2159e79c7041acd8b198 section#accueil-1 .sqs-col-4 { width: 100% !important; } } @media only screen and (max-width:1400px) { #collection-5d1c71e5cd79fe00013bc949 section#la-formation-1 .sqs-col-4 { width: 100% !important; } } @media only screen and (max-width:1400px) { #collection-5d1c72071e661a0001ce3151 section#le-recrutement-1 .sqs-col-4 { width: 100% !important; } } @media only screen and (max-width:1400px) { #collection-5dd3f8cfb16d2c02ed717542 section#mdias- .sqs-col-4 { width: 100% !important; } }
  19. Hi all, I created a custom H4 in a markdown block. But it's not responsive on mobile. Can anyone help me adjusted the custom css?
  20. Hello everyone. I need help on my website. I used a custom css profile to have the buttons with the same width but then when i go in responsive mode the buttons are colliding and don't stack on each other. Here is my website link : https://rhino-bullfrog-fc8l.squarespace.com/le-conseil Here is the css that i used to have them in the same size : sqs-block-button .sqs-block-button-element { width: 350px; } Thank you for the help !
  21. Hi everyone! I have added an SVG to my splash page: thelazydogcreates.co It looks fine on desktop and tablet, but the SVG on mobile is too small. I'd like to increase the size on mobile. I'm not very familiar with code, so any help would be much appreciated. This is the code I have in place currently, pulled from Adobe Illustrator: <div style="text-align:center;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70%" height="70%" viewBox="0 0 670 200" xml:space="preserve" preserveAspectRatio="xMinyMin slice"> <style type="text/css"> .st0{fill:#222222;} </style> <path class="st0" d="M377.48,80.85h6.67l-7.73-8.1l-11.86-3.77l-14.5-16.01l-15.82-11.3l-0.19,6.78l-27.49-3.39l12.27,10.57 l8.26,9.15l-12.81,9.28l0.88,10.16l-28.38,21.29l14.88,10.92h18.83l15.44-6.98l1.32,2.47l-12.81,21.09l2.07,13.23l5.62-7.58 l5.12,19.02l5.84-13.18l39.17-27.87l4.52-16.76L377.48,80.85z M293.69,107.62l-3.1-2.14l3.01-2.26l1.44,0.17l0.69,3.53 L293.69,107.62z M327.96,85.25l-3.18,0.98l-2.44-2.27l0.5-2.18L328.7,82L327.96,85.25z"/> </svg> </div>
  22. Hi. I have embedded some forms on a website using the styled HTML code (from Infusionsoft keap). I've tried different CSS to target the forms and make them responsive on mobile devices but I can't find the right code. The input fields and button are hanging of the screen. An example of a form is on this page https://www.soulspacehealers.uk/. Can anyone help?
  23. Hello guys Like many websites, mine has skyscraper ads of which are ideally designed for viewing on a full screen browser but do not work well for mobile use. I have seen code that would allow single images to be responsive in that a skyscraper (160x600) can be replaced by a square (250x250) advertisement when the browser window reaches a certain minimum/maximum width. Is there such a code that can be done with galleries on Squarespace? For example - I want to have a slideshow gallery of rotating skyscraper ads display on browser screens over 750 px wide. Where anything narrower, I want to have a slideshow gallery of rotatng square ads shown in the same place. Thus optimizing mobile viewing.
  24. Hi there! I've tried everything ...I cannot figure out how to get my embedded google sheet to be responsive. Do any of you fancy coding types have any ideas? I would appreciate your help or even your empathy! <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true" width="100%" height="2000" frameborder="0" scrolling="no" padding="0" margin= "0"></iframe></div> http://www.ryeeducationfoundation.org (password: ref100) path grants>find your liaison
  25. Hi -- I'm hoping to adjust how the mobile stylesheet renders the H1 tag. I've chosen a large, bold title for the front page, yet when it is viewed on mobile, the stylesheet is causing the words to break unnaturally. I'd love for the text to resize to an appropriate scale, similar to how the Bedford template works. Any advice? Thanks!Jon
×
×
  • Create New...