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

Search the Community

Showing results for tags 'responsive-design'.

More search options

  • 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
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me



Found 45 results

  1. I'm creating a details page on the Heights Template. I'm using text blocks and lines and spacer blocks to create additional rows to mimic the initial design layout. However, when the page goes to mobile view, the blocks I've added stack incorrectly while the original ones stack the way they are supposed to. Is there a way to either replicate the initial template design to add additional rows or force the new blocks to stack in the same manner?
  2. Hello, I have a website and i made some specific design choices like the size of my buttons. The problem is when i go in responsive mode my buttons are getting out of the limits of the screen. See what i mean in picture 1. My other problem is my buttons to go page up and go page back are getting huge when in responsive mode . If someone can help me please you are welcome ! Sorry for the bad english ! Have a nice day. Here is my website link : https://rhino-bullfrog-fc8l.squarespace.com/la-formation
  3. I'm trying to style the info-footer and footer on the website I am working on. It looks lovely in Desktop mode, and not so lovely in tablet or mobile. (I've given it a good try piecing together code from reading the help forum, but I haven't had any luck.) The template is OM from the Montauk group. The website is here. I've attached screen shots of the Desktop, Mobile and Tablet views so you can see what I mean. What I would like is to edit the info-footer on both mobile and tablet: the logo to span evenly across the whole footer the email and address links to stack neatly in the centre below the logo graphic the social links in the info-footer to also be in a line, centred below the email and address links but not touching the footer the copyright, terms and conditions and privacy links to be small and not scattered across Any ideas? Thanks!
  4. 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; } }
  5. Hi all, I'm trying to disable mobile responsive design for only some blocks on my website. My website URL is: https://cheap-talk.com/ On mobile, the products on my home page stack and it's not the best UX for customers. I want these to stay in rows of two instead of stacking 1:1. Anyone know how to do this? Custom CSS?
  6. 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 !
  7. I have a section on my website where there are 4 infographic boxes/components. On desktop, they are shown in a 2 x 2 grid layout. I'm wondering if it is possible to show them in a horizontal carousel / scroll-through on mobile? Does anyone know if this is supported on Squarespace through custom coding? Thanks a lot!
  8. Hi there! i have a page that has two blocks side by side, left is a title and right side is a code block with a review carousel. the problem is when shrinking the window, the code block (review carousel) stays on the right for way too long and it squishes the content until it becomes unreadable instead of just stacking under the title sooner. is there any way to change this? thanks
  9. 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?
  10. Hi, Is there some code that will make a 'code block' fill the full bleed of the screen on the homepage? The code block currently retrieves and displays two images (one on hover only) but the images don't spread full bleed as I can only manually drag the code block out to a certain width. I'd need a 'responsive' solution to perform properly across all devices (smartphone etc.). Any help would be much appreciated.
  11. I am trying to find a bit a code that would allow my Mojave template to display one image in the header banner image space on desktop and a different image for mobile. @alxfyv (taggin you because Ive tried a few of your suggestions that have worked for others but not myself)
  12. Hello Community, I would like the height of the images on my homepage in desktop view to shrink (https://www.thecigarbible.com/en/home). The current height is perfect for my mobile view but too tall for anything above the mobile breakpoint. Currently I am using the following code to stretch the images on mobile.
  13. Hello Everyone, Kind of in a dilemma and in hurry to see if anyone can help me... Is there any coding out there that can stop the use of responsive sizing? To be as clear as possible, I have a Wells template and I'm tired of having the images rearrange every time I move from one display size to another. In other words, is there a way so that the entire site can retain its proportions (including gallery thumbnails)? Thank you so much in advance!!
  14. Want to assign h1,h2, h3 to blog feed on blog entries. all type classes for blog can be edited but no ability to control their responsive behaviour? would essentially need: blog list title font - h1 blog excerpt font - h3 blog read more link - h3 using lange template. https://www.designsuite.com.au/insight any info would be much appreciated!
  15. I have 6 buttons that are horizontal to each other on desktop view and eventually move to a horizontal view when moving to tablet or mobile. The issue I am having is the buttons are overlapping each other in some responsive views and it looks tacky. How can I make sure the buttons don't overlap when changing to a responsive view? In addition, the buttons are not evenly spaced.
  16. Hey guys, I have the following problem: My Slideshows looks great on desktop, but not as good on mobile, especially for portrait mode pictures. For landscape, it is fitting but the pictures in portrait mode are too small (high). I want them a bit bigger. Is there a possibility to do that? Please take a look on this homepage for instance (on mobile): www.tobiasholub.at Thanks for your help!Michi
  17. has anyone figured out how to have two different images in the header index image space so these 'responsive' templates actually work and look decent when viewing on different platforms. Hoping to have a landscape version of my header image viewed on desktop, and a portrait version for mobile and tablets. @Paul2009 you seem to be a wizard in this area ... any suggestions?
  18. Using the Jasper template. Here is the code I'm using: @font-face { font-family: "Metropolis"; src: url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e87913a06645e30fa5f/1568173704160/Metropolis-Medium.woff2), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786e789da84f77dcfe024c/1568173688518/Metropolis-Medium.woff), url(https://static1.squarespace.com/static/5d707e930fec5500014bea13/t/5d786eaf9da84f77dcfe0813/1568173744007/Metropolis-Medium.otf);} header#header * { font-family: 'Metropolis' !important; font-size: 22px!important; } h1 { font-family: 'Metropolis' !important; font-size: 22px!important; }
  19. Hi everyone, Ive been unable to get a set of 3 images that appear side by side on desktop to show up on mobile in one row instead of stacked. Link to the site: https://sawfish-decagon-67am.squarespace.com/liquid-mind-- the gradient circles in the top right of the page on desktop show up side by side and i'd like them to appear the same way on mobile under the header. I tried multiple ways, but left 2 of the latest attempts on the page: 1. Using an image gallery. Its set to 3 images per row, but showing up as 2 images in a row, then the third on the next row on mobile. Some instances of this page will have 2 circles and others will have 3, so I am not sure that the gallery will work? 2. Trying to link the images together using the guides and even lines in order to view them as a set, but its not translating to mobile. Thanks so much in advance for your help!
  20. I've added a vertical line to one of my pages in my Five template. However I would like to add css to have it not show up on any mobile or responsive design view. is this possible?
  21. Hi all, Following a previous answer to my question I was able to remove in large part some of the white space which appeared to the right of my website when opened on a desktop: www.antoinesimonfineart.comThough after trying on additional monitors; mac and pc I have noticed especially on the mac desktop that there is still a lot of white space to the right. I have tried increasing the site width (as previously suggested) to the maximum but even that will was not sufficient on a mac desktop. I wondered if there is a way to make the page responsive to each pc so that it centers the page? Is this specific to the template (Wells) I am using perhaps? Perhaps by using a different template where the sidebar is positioned on the top as opposed to the left this would help center the website on different screens? Thank you!
  22. Looking for the best template for my site zachmattheus.com as the video is currently not responsive Just want the single video to work across desktop and mobile and have the small amount of text + contact.
  23. Hi, My webpage www.antoinesimonfineart.com appears very differently on mac and windows. While the page is very responsive on mobile and mac, it shows a lot of white space to the right of the screen on windows. I have tried playing with the padding but this does not seem to work. Any thoughts? Thank you,Best, Antoine
  24. Hello, I am having trouble fine-tuning my responsive container-embedded Facebook Feed. I am using the Impact (Brine) template on Squarespace. Problem: I want to make the container/feed both wider and taller on desktop view, but let it shrink responsively for smaller screens, tablets, and mobile devices. So far I have not been able to quite figure out how to both make it larger where I want it AND make it smaller where I want it without funky hidden overflow problems. Can anyone point me in the right direction? Thanks!! Vanessa Here is the page in question: https://www.oldgrowthforest.com/latest-news. Here is the code block code I have on that page: 1 <center>2 <div id="fb-root"></div>3 <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.3"></script>4 <div class="resp-container-fb">5 <div class="resp-facebook">6 7 8 <div class="fb-page" data-href="https://www.facebook.com/oldgrowthforestnetwork/" data-tabs="timeline" data-width="" data-height="1000" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/oldgrowthforestnetwork/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/oldgrowthforestnetwork/">Old Growth Forest Network</a></blockquote></div>9 </div>10 </div>11 </center> and here is the Custom CSS I have added regarding my container: 1 .resp-container-fb {2 position: relative;3 overflow: hidden;4 padding-top: 150%;5 }6 7 .resp-facebook {8 position: absolute;9 top: 0;10 left: 0;11 width: 100%;12 height: 100%;13 border: 0;14 15 } Sorry, I am also having trouble displaying this code properly!
  25. Hello, I need a bit of code so that the banner images on my pages are responsive proportionally. At the moment on the phone and I-Pad views, the banner image just crops rather than fits the whole image in. Can anyone help please! It would be much appreciated. Web address below: https://www.eattahini.co.uk/ Thanks
  • Create New...