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

Search the Community

Showing results for tags 'mobile'.



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

  1. Hey there, pardon if this question has already been asked before. I'm wondering if it's possible to have a site which uses the Brine template configured to use a logo when being viewed at mobile or tablet resolutions, and the regular site title be used if the site is being viewed from the desktop. The logo for the site I'm working on is effectively a square. It's great for mobile views, but gets a bit small in the desktop view. I've tried increasing it size-wise, but that only makes it dwarf the other items in the header. The site title is too long to use in mobile view: it gets all bunched up and crowds the other header items, even when they're compressed for mobile. Is it possible to have this configuration in Brine, or in any Squarespace template for that matter? Or am I better off trying to create a logo that's wider than it is tall, and therefore scales better?
  2. Hi, I am using the brine template... I want to target and control the size of a specific image when changing between desktop, tablet and mobile. The image is the logo 'tbk' and sits within a banner at the bottom of a page. The size of the logo is perfect when in desktop mode, too small in tablet mode and too large on mobile. Is there some custom CSS i can add that will allow me to control the sizes for each. See images attached. website: tbktest.squarespace.com Thanks in advance. Dan.
  3. I'm working on a website and there seems to be a problem with the mobile view. It looks like the logo is covering the drop down navigation. When you first go to the site on mobile it doesn't do it but when you refresh and try to use the nav you can't see the pages. She's using the Mojave theme. Viewing on iPhone. URL: modernsocialdetroit.com Does anyone know why this is happening?
  4. Hey Guys! I've already used custom CSS to adjust the mobile fonts on my site, however, I can't figure out how to adjust the size of the product titles in mobile view. I'm using the Jaunt template. Any help would be great...thanks!
  5. How can I increase the size of a carousel on mobile? Also, I have obtained a css code to allow rotating words on the home page, as well as the html for it. But, it doesn't display right on mobile. How do I fix this? Here's the code: // Rotating Word 1 // .rotating-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #4FEAAB; } // Rotating Word 2 // .rotating-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #4FEAAB; } // Rotating Word 3 // .rotating-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #4FEAAB; } // Rotating Word 4 // .rotating-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #4FEAAB; } // Rotating Word 5 // .rotating-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #4FEAAB; } // Rotating Words // .rotating-words{ display: inline; text-indent: 5px; } .rotating-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } }
  6. My client's website is growthleadersgroup.com There is a left/right shift on mobile where you can basically grab the screen and move it left or right and then it will spring back when released. a horizonal scroll? I cannot figure this out!
  7. Hi. I just added a html block to my website. It looks perfect on desktop. But, I don't know how to get it to display correctly on mobile. Anybody have an idea? Here's the css code. Thanks! // Rotating Word 1 // .rotating-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #4FEAAB; } // Rotating Word 2 // .rotating-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #4FEAAB; } // Rotating Word 3 // .rotating-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #4FEAAB; } // Rotating Word 4 // .rotating-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #4FEAAB; } // Rotating Word 5 // .rotating-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #4FEAAB; } // Rotating Words // .rotating-words{ display: inline; text-indent: 10px; } .rotating-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } }
  8. I have a little bit of an odd problem with anchor links and mobile navigation in the new 7.1 template. I'm creating a single page website for a client (unfortunately I cannot yet share the website) and have created anchor links in the main navigation so users can quickly scroll to sections of the page. I've done this by setting the links as "#AboutUs" for example, and creating an empty div with the id "AboutUs" where I want the page to scroll to. In the desktop layout this works as intended, but on mobile when a navigation link is clicked the full-screen navigation menu remains open. The user is then completely unaware that the link has worked as it looks like nothing has happened, when in fact behind the full-screen navigation menu the page actually has scrolled to the correct point on the page. I've tested this in a live 7.0 site and it works as intended (open mobile navigation > click on anchor link > mobile navigation closes and page scrolls to the relevant id) but not in 7.1. I've also noticed that the page no longer smoothly scrolls when clicking an anchor link like it did before, but this is a minor issue compared to the above, so it doesn't bother me too much. TL;DR In 7.1, is there a way to force the mobile navigation menu to close when an anchor link is clicked?
  9. Hello, I uploaded a custom font and it's working fine on desktop but won't load on mobile. I've tested on both android and iphone. My site is https://www.beautybymichele.ca/about (homepage is a cover page). I'm trying to add this font to both the header overlay text and the H1 headings. I read it's good to add many font formats so that's why I have so many. Here is the code I used: /**********CUSTOM FONTS**********/ //adding playlist script font @font-face { font-family: 'Playlist-Script' !important; src: url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7183b492ddd0f8b82bc87/1573328955817/Playlist-Script.eot'), url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7184559401f78176f21e2/1573328965178/Playlist-Script.otf'), url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc71859df818a4a7428db06/1573328985576/Playlist-Script.ttf'), url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7185f09cdf43d6db139cf/1573328991947/Playlist-Script.woff'); } //customize h1 to playlist font h1 { font-family: Playlist Script, sans-serif !important; color: #cfa2ad; font-size: 40px; } //style banner text to playlist font .desc-wrapper p>strong { font-family: Playlist Script, sans-serif !important; color: #cfa2ad; font-size: 60px; line-height: 63px; text-transform: capitalize; } Thank you so much... I have been stuck on this. Have a good day- Michele
  10. Hi. I'm attempting to change the opacity of my banners on mobile as the parallax is falling too far behind the text and making it difficult to read. Can anyone advise a CSS injection that would change the banner opacity on mobile only so that the banner is more faint? Many thanks in advance,
  11. Hey all, I'm building a site on the Wav template with forced Mobile. I have the menu sliding out so it only covers a small part of the page. But part of page it's not covering is just white. Could someone direct me in having the site visible behind it. https://bell-parrot-x7ly.squarespace.com/ password is password
  12. Is it possible to set the homepage on mobile device as a different page in your site rather then the page that opens for desktop. I would like my mobile site to open directly to a project/section rather then opening to a cover page.
  13. Hi! I created a split screen banner using flexbox, and I'm having a hard time getting the elements to stack on mobile, rather than stay squished on one line. This is the page I'm working on: https://www.augustbitters.com/home Would greatly appreciate any assistance I can get as my computer is on the verge of being thrown out the window 🙂
  14. I need some help fixing extra padding in between two images on Brine when viewing on a mobile device. The code I am currently using is: . @media screen and (max-width: 640px) { .homepage .sqs-block.image-block:last-child { padding-top: 0 !important; } Although I know this is only targeting the homepage. How can I target my services page (https://www.domaniquejazmindesigns.com/services) as well to get rid of the extra padding in between the two image blocks at the bottom of the page when viewing on mobile?
  15. 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!!
  16. Hi, can anyone help me with displaying the tagline on the mobile version of my site please? www.vibeyogaandpilates.co.uk P/W mysite100 Thanks in advance Mike
  17. My site has a weird spring behavior on mobile. Rather than fixed horizontally, it can be pushed left or right and then bounces back. Very annoying. Can someone tell me how to eliminate this. I am using the Bedford (Hayden) template http:www.growthleadersgroup.com Thanks.
  18. Hello. I am using code blocks so that I can customise, format and size my text in different areas throughout my website, without it affecting the general style of the website on a whole. I am not a fan of the general text box because I can not customise the text exactly how I want it. For example I do not want my H1, H2 or H3 titles to be really big, but I do want some text on my website to be bigger or styled differently in certain areas to stand out and grab attention, which is why I am using the code blocks. However, I am finding that the code blocks are not scaling correctly for mobile. On desktop they look fine and give the visual impact I am looking for, but on mobile because they are not scaling properly, some of the text gets cut off or is just way too big. For example, in one code block I am using the following code: <center> <font size="5em" color="#ffffff"><span style="line-height:1.5em"><li style="list-style: none;">Let's get people talking.</li></span></font> <font size="7em" color="#ffffff"><span style="line-height:1.5em"><li style="list-style: none;">Let's create something EXTRAORDINARY together!</li></span></font> <font size="4em" color="#ffffff"> <span style="line-height:2.5em"> <li style="list-style: none;">I'm ready when you are.</li></span></font> </center> Which on a desktop looks like this: But on a mobile it looks like this: I am using em instead of px because I read that this is meant to help with the scaling, and in most cases this is fine across my entire site, but for some reason it is not here. How can I use code blocks to create custom text for visual impact on my site, but still have it scale down so it looks just as good on mobile? Thanks.
  19. On a desktop (PC/Mac) my gallery's load completely fine and fast (images are 50-100kb on average) but for some reason if I load a gallery page on a mobile device (Android phone, iPad, etc) the galleries thumbnails are either slow to load images or fail and show the image file name. The images will generally load if I refresh the page but that is a bad user experience. Any thoughts as to what I can do? Link to page: https://www.aprilrainsphotography.com/paris-france
  20. Hi, I use the Moksha template and wanted to have a fixed/frozen navigation header when scrolling down, allowing visitors to still see the navigation bar even if they scroll down. I found a way to do it using custom CSS, where I added the below coding I found on this forum and it seems to work so far on a desktop version, however it doesn't work on mobile devices... any clue on what I can do ? Thanks for your help!! Camille This is the Custom CSS code I used for desktop: header { position: fixed; width: 100%; z-index: 4; }
  21. Hi- I am trying to use an all together different image for my homepage banner image on my Aria site. www.aniwa.co The desktop image is horizontal based, so for mobile it cuts off and regardless of the coding it will be cut off too much. I have a vertical version of the homepage image that I want to display on mobile. Anyone have a CSS code for a all together different banner image on desktop v mobile? Thanks! Danielle
  22. 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)
  23. hello i have an image that is centered on my page in desktop and tablet view, but in mobile view it gets pushed off center to the right. i have no idea how to fix this. any suggestions?IMAGES ARE OF DESKTOP VIEW AND MOBILE VIEW. i need the laptop to be centered.
  24. So right now I have a site that in desktop view it looks good for the hero image/text but when going into mobile view the text color doesn't stand out from the portion of the hero image that fits into the mobile portion. I was just wondering if there is a way to change the text color of mobile view?
  25. Hello I'm using the Bedford template and have a one page website with section anchor links up top in the navigation menu. These links work perfectly fine on desktop and iPad. On the iPhone though, the links are hidden in a hamburger menu button and after opening up the menu cannot be clicked. Can anyone help me figure out how to make these links work on mobile? Thank you!
×
×
  • Create New...