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


  • 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
  • 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 Topics
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Topics
  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me



Found 846 results

  1. Site URL: https://www.botanicanorte.com Hi! I am getting ready to launch my site soon and I just noticed that on mobile, the add to cart button, select option dropdown menu, and quantity field are all not centered. I spent some time looking for the names of these things in the source but can't figure it out for the life of me. This also happens on any mobile browser (on iOS, anyway). I just want them centered! 😞 This happens with every product if you go to my shop. it's not live yet, so if you go to botanicanorte.com and head to the shop page, the password is botanicapdx. I truly appreciate any weekend warriors willing to help!
  2. Site URL: https://www.amyjoycreative.com Hi I added the titles for this video gallery and now the play button is not working properly on mobile devices. Is there a way I can maintain the titles and make the gallery work on mobile? Thanks
  3. Hi 🙂 I'm trying to display multiple products on a page, and align them on the desktop version from right to left, but when I switch to mobile view it dislayes the most left product first, instead of the most right one, and the whole order is backwards. Is there code I can put in the page to change the way things are displayed? (get it to right-to-left instead of left-to-right) *I already got a right-to-left text code in there if that changes anything: <div dir="rtl"> Cheers, Imri
  4. Site URL: https://www.jeremyjameshunt.com Hi there! I'm using the Montauk template on my website, and would like to force the site title to appear on one line when viewed on a mobile device. At the moment, it splits up the title on to separate lines. (On my phone, "JEREMY" is on the first line and "JAMES HUNT" is on the second line). Is it possible to squeeze "JEREMY JAMES HUNT" on to one line on mobile devices? Thanks in advance for your help! All the best, Jeremy
  5. I'm working within the Harris (York family) template for a client, and unfortunately can't convince them to switch to a more robust template. Right now, the shopping cart icon on mobile is only visible within the navigation menu. Does anyone know of custom code that could move it either to the left of the mobile navigation button or to the bottom of the page (similar to how it is on Brine templates). Any input is appreciated!
  6. Site URL: https://www.dfwmicropigmentation.com Hi ya'll, Is it possible to style only for mobile/iPhone? For example, I hav the following css for controlling padding on my home page, but I want to decrease the padding-top a little more for iPhone: div#home-page { padding-top:10px; padding-left:0px; padding-right:0px; } Do you use the same code again, but wrapped in a css for mobile? How is that done correctly? Thanks so much!
  7. Site URL: https://www.visualreserve.com/nashville-covid19 I have one page on my site that uses roll-over images and doesn't really work well on mobile. Is there a way to either A) Make the roll-over work on mobile. It works, but you it gets confusing for the user the way it does. or B) Re-direct that one page to a different page that I make separately just for mobile users? Thanks!!!!
  8. I have created a 2 page website in 7.1. I want to disable the mobile breakpoint of 991px and just keep the regular menu bar visible as there is only 1 button to a contact page on there. Does someone have the CSS code to disable the mobile menu in 7.1 since there isn't an option to set it to 0px in the style editor?
  9. When I am viewing my site on a mobile device, the navigation works fine. Until I rotate the device. Then the menu button appears, but once open all that is in the navigation is social links, no actual menu items... How do I fix this?
  10. Site URL: https://northbarcellars.squarespace.com/ I added padding around some text boxes, but I don't want this custom CSS to appear in the mobile view. How can I make it show for computer browser versions only?
  11. Help! I have no coding experience whatsoever. Is there a way to make the caption that comes up when hovering on an image block, always 'on' when viewed on a mobile device? Sorry if this is a overasked question, or something simple, or something that just isn't possible. Thank you!!
  12. I have coded in my custom fonts but on mobile, the script font is HUGE is there a CSS to target just that font?
  13. Site URL: https://www.woogspark.com/ Hi all, With 7.1 the header for mobile tends to create hamburger menu on the left, logo in the center and the cart on the right. I'm hoping to move my logo on the far left and have the menu and cart on the right. Does anyone know maybe a custom css or any other method to pull this off? Thanks.
  14. Site URL: https://crate.media/shows/launch-guide/1-apps I've updated the site design with a custom font via CSS. Seems to be working on the majority of areas of the site. However, the normal body/p font in bold is not generating properly on mobile views. Desktop (correct): Mobile (incorrect): As you can see it's defaulting to some generic serif font on the mobile version. I've tried assigning a specific bold font in the code below. Removing that, it looks like the desktop view automatically formats my font in its own version of bold, which is what I would like. But it isn't automatically working for mobile, which is why I tried to assign a specific "p strong" font. I also had to specify the custom font for the image caption blocks, as that was not updating automatically. Here's the code I inputted to use the new font: // HELVETICA NEUE THIN // @font-face { font-family: 'Helvetica Neue Thin'; src: url('https://static1.squarespace.com/static/5d4b0cab3d651f0001b888d0/t/5e95d4d628d1592862d98574/1586877654407/HelveticaNeue+Thin.ttf'); } // ASSIGN H.N. THIN // p {font-family: 'Helvetica Neue Thin'; letter-spacing: 0.013em; } // HELVETICA NEUE BOLD // @font-face { font-family: 'Helvetica Neue Bold'; src: url('https://static1.squarespace.com/static/5d4b0cab3d651f0001b888d0/t/5e95d4e7d41df27156da9138/1586877671732/HelveticaNeueMed.ttf'); } // ASSIGN H.N. BOLD // p strong {font-family: 'Helvetica Neue Bold'; letter-spacing: -0.05em; } @media screen and (max-width: 765px) { p strong {font-family: 'Helvetica Neue Bold'; letter-spacing: -0.05em; } } // IMAGE CAPTION FONT // .sqs-block-image .image-caption p {font-family: 'Helvetica Neue Thin'; letter-spacing: 0.013em; } .image-title-wrapper {font-family: 'Helvetica Neue Thin' !important; letter-spacing: 0.013em; } .image-subtitle-wrapper p {font-family: 'Helvetica Neue Thin' !important; letter-spacing: 0.013em; } .image-subtitle-wrapper a {font-family: 'Helvetica Neue Thin' !important; letter-spacing: 0.013em; } // IMAGE CAPTION FONT BOLD // .sqs-block-image .image-caption p strong {font-family: 'Helvetica Neue Bold'; letter-spacing: 0.013em; } .image-title-wrapper strong {font-family: 'Helvetica Neue Bold' !important; letter-spacing: 0.013em; } .image-subtitle-wrapper p strong {font-family: 'Helvetica Neue Bold' !important; letter-spacing: 0.013em; } .image-subtitle-wrapper a strong {font-family: 'Helvetica Neue Bold' !important; letter-spacing: 0.013em; }
  15. Site URL: https://www.michellegonzalezphotos.com/ Implemented a custom mobile navigation menu, and for some reason on mobile screens, a fixed header is appearing OVER the mobile navigation menu. Been racking my brain for hours on what could be causing this issue. Doesn't appear in the mobile screen in the Squarespace backend, but does when testing on actual phone. Which makes it difficult to target the element itself in the Inspect window. Reckon I may need to adjust the z-index of an element? Not sure if I have another element that could be causing the issue, but I've looked at everything and can't seem to figure this out. Any help would be greatly appreciated! Also happy to provide any other info that you feel would be helpful. Code used to implement a fixed header & to change on scroll here: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on("scroll", function() { if($(window).scrollTop() > 400) { $(".Header").addClass("on-scroll"); } else { $(".Header").removeClass("on-scroll"); } }); </script> .Header{ background-color: transparent; width: 100%; position: fixed!important; transition: 0.2s all linear; -webkit-transition:background-color .4s; -moz-transition:background-color .4s; transition:background-color .4s; z-index: 999; } .on-scroll{ background-color: #e6dcd1!important; z-index: 999; } .on-scroll .Header-nav-item{ color: #000!important; } .Header-inner--bottom { padding-bottom: 20px; } .on-scroll .Header-branding-logo { visibility: hidden; } .on-scroll .Header-branding { background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e88a47dc8efd76b478354ac/1586013309515/primary-logo-black.png); background-size: contain; background-repeat: no-repeat; background-position: center center; transition: .4s; width: 220px; } Code used for custom mobile navigation menu here: ///Mobile Overlay/// //mobile .Mobile-overlay-nav-item { text-align: center; } .Mobile-overlay-menu { background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e91ced3cfe71128e10e1bcb/1586613973454/Venice+Italy+Wedding+Anniversary+Photography+Session-+Destination+Italy+Wedding+Photographer+-+Michelle+Gonzalez+Photography+-109+%281%29.jpg); background-color: #f5deb3; background-position: center; background-repeat: no-repeat; background-size: cover; width: 100vw !important; } .Mobile-overlay-close { z-index: 999; background:transparent !important; } .Mobile-overlay-nav--primary { padding-top:60px; } .mobileLogo { width: 190px; margin-top: -20px; } //mobile branding logo// @media only screen and (max-width: 640px) { .Mobile-bar-branding { -webkit-filter: invert(100%) !important; filter: invert(100%) !important; filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); }} //Add this to disable logo on desktop @media screen and (min-width:760px) { .mobileLogo { display:none; } .Header-nav--primary .Header-nav-item:nth-child(1) { display:none !important; } } .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child { padding-top: 0em !important; } .Mobile-overlay-folder-item { text-align: center !important; padding-top:20px; font-family: 'Danmark Medium';//change as necessary } .Mobile-overlay-folder { padding-top:100px; } .Mobile-overlay-folder-item--toggle-label { font-family: 'Danmark Medium'; } //Add this to disable logo on desktop @media screen and (min-width:760px) { .mobileLogo { display:none; } .Header-nav--primary .Header-nav-item:nth-child(1) { display:none !important; } } .Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child { padding-top: 0em !important; } .Mobile-overlay-folder-item { text-align: center !important; padding-top:20px; font-family: 'Danmark Medium';//change as necessary } .Mobile-overlay-folder { padding-top:100px; } .Mobile-overlay-folder-item--toggle-label { font-family: 'Danmark Medium'; } The image of what the issue looks like on a mobile screen is attached. I've also attached a screen recording of the issue. Hopefully someone can help me narrow this down! RPReplay_Final1586874343 2.MP4
  16. 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; }
  17. Site URL: https://smilodon-ocelot-my5f.squarespace.com/blog/all-about-photo-merit-award Hi, How do I make the date smaller in my individual blog pages in MOBILE view? passcode: trythis
  18. Site URL: https://www.ladiesdrawingnigh.org Can anyone tell me how to hide my Instagram feed on mobile? I tried code I saw here, but it did not work. I'd really like to do something like the attached pic (show only 2 rows, 4 pics total, of the Instagram feed--right now it's showing all 7 pics that I have on my computer). I'd also like to know how to get the white border around each pic), but if I can't, then I'll just not show Instagram on mobile. So, if anyone can give code for this and where to insert it, that would be awesome! I know how to get the tan background. Thank you!!
  19. Site URL: https://www.eccotravels.com/ Hello! I was working on my site today and looked at it on mobile to see how it was going. To my surprise, the mobile bar was absolutely gigantic (too much padding above and below the branding). I didn't do anything for it to become so large, it's always been very thin, which I loved. Now the mobile bar covers almost half of my phone screen. I can't even see the mobile menu options properly, they get cut off and the drop downs can't be seen. Desktop, to my knowledge is fine, this is a mysterious mobile problem. Currently, my page has absolutely no CSS or custom anything on it. I'm creating a video to put as a homepage banner and that's literally the most exciting thing going on about it. I use the Artesia template, which I believe is a York family template. Please help me! How do I make this padding smaller? Could this be a glitch and it will go back to normal? I'm happy to put in some custom CSS, nothing that I've searched even made a dent into changing things. I uploaded screenshots from my phone so you can see the issue. THANK YOU SO MUCH!
  20. Site URL: https://www.mumfolk.com Is there a way to centralise all buttons on mobile? So even if aligned left or right on desktop view, they are forced centrally aligned on mobile? Wondered if there is a way to add code so that it applies to all buttons or do you have to target each button individually? Thanks in advance for your help
  21. Site URL: https://www.mumfolk.com I'm having trouble formatting fonts on mobile. Couple of issues: 1. The fonts aren't displaying correctly when I view the site on my mobile phone (iphone 7) although they look differently when you look on mobile view on desktop 2. I would like to centrally align the text and buttons (standard buttons and buttons for forms) on mobile but it's not seeming to work I have 9 font styles in the CSS, not sure if that's causing a problem! Here is the code I have @media only screen and (max-width: 640px) { body {font-family: "aktiv grotesk", sans-serif; font-size: 14pt; line-height: 25px; text-align: centre !important!;} h1 {font-size: 35pt; line-height: 55px; text-align: centre;} h2 {font-family: "Bely", serif; font-size: 25pt; line-height: 38px;} h3 {font-family: 'aktiv grotesk', sans-serif; font-weight: 600; font-size: 12pt; line-height: 22px;} h4 {font-family: 'Bely Display', serif; font-weight: 700; font-size: 25px; letter-spacing: 0.03em; text-transform: none; line-height: 1.3em; color:(#E7B1F2); text-align: centre !important!;} h5 strong { font-family: 'Bely Display', serif; font-weight: 700; font-size: 20px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 2.2em; color:(#000000); text-align: centre !important!;} h6 {font-family: 'aktiv grotesk', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 2.5em; color:(#000000); text-align: centre;} h7 italic {font-size: 21pt; text-align: center !important!;} } Any suggestions would be very welcome! Thank you
  22. Site URL: https://www.medizen.es/ Hi! I need to make smaller the 3 images on the 'Beneficios_home' page of the Home menu for mobile devices. I tried this CSS but there is a lot of space in the image, very far from the text and off-center: @media screen and (max-width:640px) { div#block-7a7e47bdae5ddd29adf7 img { width: 50% !important; height: auto !important; transform: translateX(-50%); left: 50% !important; } } Could you please help me? Thanks in advance, Ana website: www.medizen.es Pwd (lock page): Medizentecuida
  23. Site URL: https://sparrow-minnow-h64a.squarespace.com/ When I go to mobile view to check my website is responsive, the two gallery index pages on my homepage don't show properly. The overlay text is cropped out and doesn't scale down to fit into the background. I'm using Brine template. Website: https://sparrow-minnow-h64a.squarespace.com/ Password: mirlo Mobile: Desktop:
  24. When using lightbox, i have a small dot in the bottom to show captions (within the image). however, it is too small and nobody can find it. is there a special css code to always show the caption when opened in lightbox?
  25. Site URL: https://www.nolenryan.com/ Does anyone know if there is a code to keep my mobile version popup advertisement the same as my desktop version as far as having the image included? When it shows up on mobile, it only displays at the bottom, using a text box and excludes the image.
  • Create New...