Search the Community
Showing results for tags 'mobile'.
-
Site URL: http://www.blossomcreativeagency.com Hi! I had to add the below code to custom CSS to get the images (brought in from Canva) to show up properly on mobile, and while it works great, there's now a giant gray space beneath the images that I can't figure out how to get rid of. Thanks for your help! @media screen and (max-width:640px) { .homepage .section-background img { width: 100% !important; height: auto !important; } }
-
Have a lovely video that we would like to use on the home page (includes large text blocks, etc) but which clips on mobile. Since the majority of our audience is viewing the site on mobile, I would like to disable the video and use the fallback image instead. Any thoughts on how I can accomplish this?
-
Site URL: https://www.cleanplate.co.nz/e-cookbook Hi There, I am working on a page for a client where we have embedded and externally hosted PDF Flip eBook into an iframe. I have noticed that while on desktop, everything looks fine, but on mobile, the ui controls gets trimmed off at either side in spite of the overall width of the iframe being set at 100%. The classes I want to target are (I think): .pdff-ui-wrapper .pdff-ui-controls with of width of 99% for mobile or suchlike But using the CSS editor within Squarespace, it doesn't recognize the classes as they are not 'native' to the project. Does anyone know of a quick fix for this or another way apart from how I have added the iframe? I have looked online and am a bit confused. Best regards. -
Site URL: https://grasshopper-apricots-3r3r.squarespace.com/whoweare On this website, (password: ah) we have a banner image with blue arrows. On mobile, you cannot see this image, the arrows do not show - we want the image to show on mobile. On desktop we want the image to not get cropped. Please help. @tuanphan @bangank36 (Password: ah)
-
Site URL: http://www.okayokayla.com I am trying to resize the image on the first page of my site so the height fits in the mobile browser. I have tried different codes, but nothing has worked to change the height (medium size fits perfect in testing) See examples: Desktop View is perfect: Mobile View Height needs to shrink to fit:
-
Site URL: https://thehomebrewpodcast.com/ I cannot find a way to fix our mobile menu. Currently on mobile (It doesn't happen in mobile preview or in a resized desktop window) the mobile menu overlay, when clicked, shows a full extra screen of white space. If you scroll down you find the menu buttons. What's more is it's only the mobile menu overlay on the home page. For instance on a subpage the menu shows up as one would expect.
-
Site URL: https://www.spanishlanguagecentreuk.com/online-courses I would like some help with CCS code that will correctly size my site for mobile use, keeping all the buttons in the right places, as you can see it goes crazy with the mobile version.
-
Site URL: https://www.physiobysteph.com/ In mobile view how do I prevent the LOOK AROUND and SERVICES blocks from breaking and remain side-by-side.
-
Site URL: https://www.giant.space I have tried; @media screen and (max-width:767px) { [data-section-id="60fe9c2f6afa3c563d77b71f"] { min-height: 27vh !important; } [data-section-id="60e6ebcb59b8474717d5845f"] + section { min-height: 27vh !important; } } mobile looks great when the height is set to 27 But when I try to set desktop as well it changes both sections. Any help with this would be greatly appreciated!
-
How do I change the size of GIFS on mobile?
TPLvision-2021 posted a question in Coding and Customization
Site URL: https://www.machinevisionbar.com Hi everyone, I would like to slightly increase the size of my GIFs on one of my pages, on mobile. I would like the GIFs to be at the same size as the videos: https://www.machinevisionbar.com/products (the Gifs are the last 2 images at the bottom of the page, before the "case studies". Thanks a lot in advance for your help, Marianne -
Five: How can I get logo to display in mobile view?
evbro posted a question in Coding and Customization
I found a couple similar questions on here, but the code in the answers didn't work at all for me. Is there any way for me to keep my logo displayed in the mobile version of the Five template? It kinda defeats the purpose of having a nice logo if everyone on mobile doesn't get to see it and instead just sees the page title text. Please help! And thank you!!- 37 replies
-
- 3
-
-
- five-template
- logo
- (and 1 more)
-
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?
-
Banner Image Won't Resize for Mobile View
TheIDBootCamp posted a question in Coding and Customization
Hello, Our banner artwork appears fine on our site when viewing on a computer screen, but the mobile view does not resize the banner and cuts off the bulk the image versus resizing for the mobil platform. Any tips on why this is happening, and how resolve it? We've found that the majority of site visitors use mobile, and don't want to reduce the impact of the image. Thanks in advance. -
Site URL: https://raspberry-ladybug-nhm8.squarespace.com/config/pages Hello, I'm trying to figure out if there is a way to resize some of the photos for the mobile version and tablet. My homepage looks terrible on these two versions. and the flower doesn't look so great either. the images are too cropped. How can i have a smaller version of the images that fits fully Thank you.
-
Site URL: https://www.oleiajewelry.com/ I'm having trouble figuring out how to adjust my Summary product block for Mobile. When I view it in Mobile mode, the contents are stacked instead of displayed horizontally. I want to keep the horizontal arrangement of the images for Mobile use (even if that means the text and images shrinking). Is anyone able to provide any insight on how I can update this on my website? The specific block is: #block-yui_3_17_2_1_1625238871313_6351 Appreciate any help!
-
Equal Button Width on Mobile View (for Link in Bio)
midnightumbrella posted a question in Coding and Customization
Site URL: https://www.midnightumbrella.com/links Howdy, Squarespace friends! Hope you can help me out...I’m trying to make a ”Link in Bio” page for me to direct my social media accounts to. However, as you can see in the attached image, I can’t seem to get my buttons on mobile view to be of equal width. I've tried a bunch of things, but I'm not having any luck. Any suggestions would be greatly appreciated! 🙌 Also, I’m currently injecting this page header code: <style> #header, footer { display: none!important;} @media only screen and (min-width: 767px){ .sqs-block-button-element--medium {width: 90%; !important;} } </style> Thank you, friends! ❤️ 🙌 -
Site URL: https://mindfulwaves.com/ Hello! I can't find the way to add some margin to my mobile version. Hope someone can help! Thanks
-
Hayden Template: Banner doesn't resize in mobile view
breemelanson posted a question in Coding and Customization
Site URL: http://www.breemelanson.com/beyond-form Hi there, The banner at the top is the right size but I have two other banners on the page and am unable to resize them on the mobile view. Can some one help or @tuanphan Thank you! -
Site URL: https://sswebdev-one.squarespace.com/ Site URL: https://sswebdev-one.squarespace.com/ The password for our site is: secret Here are the steps to reproduce the issue I'm trying to solve: 1) Go to the "Contact Us" page at: https://sswebdev-one.squarespace.com/contact-us 2) Adjust the width of your browser so that it's narrow enough to have the mobile hamburger menu display. 3) Scroll down the page so that the black background appears in the header area. 4) Click on the mobile hamburger menu. Actual Result: The website header text "Test Site" appears in white and it's not visible. Desired Result: I would like the "Test Site" text to appear orange. I defined this CSS (for the "Initiatives" and "Contact Us" pages): #collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 { .tweak-fixed-header .shrink.header .header-title-logo a:after { color: orange!important; } } but I think this CSS (below) is overriding the CSS for the "Initiatives" and "Contact Us" pages: /* Set font color of site title text to white on scroll */ .tweak-fixed-header .shrink.header .header-title-logo a:after { color: white !important; } Thanks in advance for any suggestions you have. -
Mobile image resize across multiple pages (same images)
jonathanw posted a question in Coding and Customization
Site URL: https://www.thestrandedwailers.com/admiralbenbow I'm creating an online songbook with separate pages for the lyrics of each song. I have Spotify and YouTube logo images at the top of each page of lyrics linking to the songs and want the logos to appear smaller on each mobile page. I've managed to make the mobile images smaller for the first song here using the custom CSS below but when I duplicate the page to add the next song, the logo images appear larger again (mobile view). Is there a way to make the logo images globally smaller on the mobile view of each song page without having to add individual CSS code for each individual page? There are a lot of songs to add! /*Spotify Logo Resize*/ #block-yui_3_17_2_1_1626492210611_21470 { width: 10% !important; margin: 0 auto; } /*YouTube Logo Resize*/ #block-yui_3_17_2_1_1626492210611_22856 { width: 10% !important; margin: 0 auto; } -
Moving Mobile Arrows on Carousel Auto-Layout Section
whereisscott posted a question in Coding and Customization
Site URL: https://kale-penguin-3t5z.squarespace.com/ Hi all, I'm designing a new website using the new Auto-Layout section in a carousel layout as a testimonial slider. However, I don't like how the mobile arrows are so far down, on the very bottom of the section (and therefore underneath the testimonial). I've tried to move them up with CSS, but the actual container itself won't seem to budge. Would love to get these towards the top, on either side of the photos. Any help would be appreciated! Website: https://kale-penguin-3t5z.squarespace.com/ Password: danacoaching Section in question: testimonials on homepage towards the bottom of the page Thank you! Best, -Scott -
Site URL: http://www.thevens.com Hello, I have my website set out how I'd like on desktop but I have two products on my homepage and also in my shop. When I go into mobile view they just stack on top of each other instead of staying in rows as I'd like. Is there any way to fix this? It's so annoying that you can't edit mobile view seperately. Website is: www.thevens.com Thank you
-
CSS to adjust padding on specific page section on mobile
LLove posted a question in Coding and Customization
Hello! I am looking for help with some CSS to adjust the padding on a specific page section on mobile. I'm using Brine 7.0 template. I've attached a screen grab - I want to reduce the negative space at the top of the image so it is equal to the padding on the sides. This is the code I have tried but it isn't working. The image is on the Index page and I put the sections url slug as my page section. Is that correct? Are you able to tell me why this code may not be working? I'm very new to this so would appreciate any help! @media only screen and (max-width: 768px) { #Index-page discover-lottelove .content-wrapper { padding-top: 50px !important; padding-bottom: 50px !important; } } Please let me know if you can help - thanks in advance! :) -
Hi, I apologize if there is such thread already. I wasn't able to locate this specific query anywhere. Is it possible to do something like this? First goal of the client was to have the mobile menu look even in desktop which was already done. Second is to have a link outside or beside the burger menu, like in the screenshot. How to do it? When I applied the mobile menu look, the 'Login' of Squarespace was outside. I just hid it since it is not the link the client wants to be outside. Thanks!
-
Autoplay Video Code Block size on desktop vs mobile
benji_roebuck posted a question in Coding and Customization
Site URL: https://tambourine-apple-mx9f.squarespace.com/semc Hello! I've followed various bits of advice on here and got a video to auto play on a one of my site pages but in order for it to display properly on the desktop page I changed the width and height to values that are appropriate. This means that it displays absolutely huge on mobile and hangs off the edge of the screen. Is there some code I can use to adjust this and how can I stop this happening on other similar videos on other pages, when I upload them? Similarly I wanted to add a secondary logo in my footer which again displays huge on mobile. Is there a way to adjust this for mobile as the spacer modules don't display. Thanks in advance!
