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


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

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 58 results

  1. Hi, I am trying to get a small circle image to float between two Index sections. I copied some code I found on this site and it looks great (thanks https://schwartz-edmisten.com/blog/floating-banner-over-two-index-sections-in-squarespace), But it I don't know enough to tweak it on mobile and tablet. Is there a way to make this work on these platforms too? https://www.jdglover.co.uk/home Password: Bebacksoon Any insights great appreciated. Jennifer
  2. Hi, Is there a way to have my image above my copy on a tablet in the same way as mobile view? I'm using the Brine template. My website is https://www.jdglover.co.uk/home Thanks so much. Jennifer
  3. Hi guys, On this one page on my site (jasper template): http://stephenjhendler.com/about I'd like to completely disable mobile responsiveness. If you look at it on mobile, it's super funky. Any help? Thank you!
  4. I'm looking for some help in enabling multiple images loading on the homepage of my Mentor template website. Is this possible? If yes, can someone point me in the right direction to enable it? website: https://www.futuregenerationtrust.co.uk/
  5. I current have a Vimeo video added to a banner on my website (added via Page Settings > Media > Video URL). The video looks great on desktop, but on mobile the text is too wide for the mobile screen and so is chopped on each side. Therefore I would like to add some custom code so that on mobile view, a different version of the video that I have produced that is mobile friendly (the text is stacked up more so it can fit the mobile width). I am comfortable with media queries, but am struggling the URL override. I've done some digging around in the html and found this: <iframe id="vimeoplayer" src="XXXXvideoURLXXXXX" style="width: 2112px; height: 1188px; left: -96px; top: -157px;" class="background-video ready"></iframe> Which might be some use? Any help appreciated.
  6. I'd like to replace the background header image with one that is designed to fit a vertical layout when site is viewed on mobile. Ideally text and icon sit above the person in the image, rather than to the side like they do for larger displays. site is https://icosahedron-rust-5y3f.squarespace.com/ password: 2020 The image below is the one I'd like to use for mobile. I can adjust image size/dimensions if needed. Any help greatly appreciated!
  7. I'm trying to edit one of my pages to have the banner image be the auto height. Essentially all of the banners are currently half screen in height. I'm looking for one page to have 33% banner height. Se pictures - one are at 100% and then the banner is at optimal height if zoomed out to 33%
  8. Hi, I am using my logo as an image outside of the main header. However, I'd like it to be a bit smaller on mobile only. Is this possible with some kind of @media only screen and (max-width: 660px)? Thanks ever so. Jennifer
  9. Hello there. I need a little help with this. I am trying to find a way to lock the text/spacer blocks to the background image (or the other way around) on this specific page. The first image shows how I wish the text to appear (full browser width) and the second shows a narrowed browser view. Is there any way to block responsive design for this single page so that the text and background are always aligned (http://www.alarmeighteen.co.uk/desk)? Any help would be much appreciated. Thank you in advance!
  10. Hi all, I have an image instead of a logo for my page, but if it loads full screen and the user modifies the width of the screen to the mid-screen break, it ruins my navigation as my logo looks blurry. If you refresh it looks crisp/fine. I want to keep the responsive design but have the image load at the full size, so that it doesn't load blurry. Is there a way to do this with CSS? Thanks! (On 7.0 w/Montauk) http://www.joshuawulbertux.com
  11. Hi all, This has been driving me crazy for some time and wanted to see if I could get some advice on how to fix. My site is looking pretty solid, but on all pages it can be shifted left/right. I can't seem to find any reason why this would be happening. Any thoughts? Here is my site for reference: https://handandarrow.com/
  12. I'd like to display 3 columns of images on my page on desktop using a summary block grid, and am happy for mobile to display one column. However, I'm foxed by how it's displaying in different windows. If i set up a 3x2 summary grid for narrower browser windows, then on wider ones it comes up as 5 across + 1 image on the next row, and a 3/1 grid only covers 3/5 of the row, which both look awful. If I set up for wider screens by adjusting the image minimum width, on a narrower screen the 3x2 reformats to 2x3 (which is fine) but a 3x1 grid shows as 2 + 1 which again looks daft. Is there a way to make the summary block grid more responsive? Thanks in advance
  13. Hello, I need to change the background color of the navigation menu on the Wells Template. However the option won't show up on site styles. I would appreciate help on this matter asap please. Thank you!
  14. 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?
  15. 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
  16. 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!
  17. 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; } }
  18. 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?
  19. 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 !
  20. 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!
  21. 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
  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. 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.
  24. 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)
  25. 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.
×
×
  • Create New...