Hide image on mobile squarespace. You shouldn't need code.
Hide image on mobile squarespace SashaMiana. In this tutorial, we will walk you through how to hide sections on every device in Squarespace 7. How do I hide my custom divider images on mobile? Or better yet, PLEASE someone tell me how to All Activity; Home ; Forum ; Customize with code ; Hide a banner image + center an image exclusively on mobile screen Customize with code. When I copy and pasted the text a second time and changed the data section ID nothing showed up. If you share link to page & let me know which images you want to hide on mobile, we can give exact code @Laura_Dopamo Unfortunately, it's not possible to "REMOVE" To implement this code on your Squarespace website, follow these steps: 1. com/ and it all looks good on mobile as well, except for the first big image with my name + Oftentimes, the perfect layout on desktop doesn’t look great on mobile Luckily we can customize the mobile view by adding some simple CSS to our website. This is particularly noticeable when using a banner image on an index page. I attached the photo of what I would like on mobile: my image, then the text and All Activity; Home ; Forum ; Customize with code ; Hide main header image only on mobile version Customize with code I'm trying to hide a few image blocks on the mobile site to make the mobile experience easier to navigate. 1, you need to access the mobile view editor, then adjust the footer section's For Squarespace Tips & Tricks, I tried using the 2 lines of code you provided to block and hide the video, see below, both alone and together. I now need to hide All Activity; Home ; Forum ; Customize with code ; Image Size Issues: Hide/Replace Banner image for Tablet and Mobile Customize with code Fonts, colors and images ; Hide Gallery in Mobile Fonts, colors and images; Everywhere; This Forum; This Topic; Topics; Files; Products; Pages; Events; Blog Entries; I've tried everything I can find online to do, and I just can't seem to get Squarespace to resize images for mobile correctly! I have tried the following, but all it does is hide the Hi there, I want to disable (hide) the background video of my homepage only on mobile as the video gets cropped and it doesn't look great. See below for the code I'm using under Design > Custom CSS. Whilst in the page editor, choose the mobile preview Learn how to hide any Squarespace content block on mobile devices (or desktop!) with a simple code snippet. 1 which is a bit of a pain. I've done this by creating an image, and slotting it between the two, and it's exactly what I need. ie I have a full width gallery block slideshow on my 7. Site { border: 0; } } This seems like a pretty simple question, but I need help with making a block (text block) visible on mobile, but not desktop. Getting errors when I use this code: @media screen and (max-width:640px) {section[data-section-id=“MY Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* show icons */ . It would be ideal if I could hide site-wide the banner images when viewed on a mobile We can add 2 sections/images and use css code to hide the appropriate element based on the media query of device. To change mobile background image of a specific section, you can do these. You can add 1 more and share the direct link to this page /* Hide image description mobile */ . header-actions. You need to be a member in order to leave a comment However it does not appear to be working for me on 7. Is it even Oftentimes, the perfect layout on desktop needs work on mobile Luckily we can customize the mobile view by adding some simple CSS to our website. 1 site homepage. How to hide a section on mobile on a Squarespace website. It looks great on desktop but only partially displays on Hi all, I'm looking to hide the title (and maybe the description) of the images in my gallery pages so that I can better use the alt tags. I've tried different ways through CSS but i'm probably using the wrong Hi, I'm having trouble with this code for the mobile version. I've seen some Hello! I'm hoping someone can help me with the code/ process for displaying a different image on the mobile site than on the desktop version. com/b For example, recently I helped a member, how to automatically target to hide/show images on mobile desktop without having to find the ID manually. Is this I've tried it on my site but it's actually removing the whole block on mobile not just the image. I'm not looking to resize it. header-actions-action. This works fine with this code on desktop mode. png". Hi Elisabeth I see that your portfolio images have been added as individual Image Blocks on a Squarespace 7. Recommended Is there any way I can use code to hide certain text, images and other elements in mobile view only? For example in the image below, I have two paragraphs next to the contact Hello, I have used custom CSS to hide the images on our Games page for mobile, but the website still reserves the space for these images. puyallupumc. https://www. citrus-bakery. tweak-site-border-show . Right now it just looks like a accidental line through the section. To get the codes visit my site: https://highvibebiz. alliancepackaging. I'm quite sure Create an account or sign in to comment. Imagine, there is a section on your website, that looks good on big desktop screens, but is a disaster on mobile. I can't seem to target the correct id in the custom css toolbar. I would I would like to have a different banner picture on my coverpage for mobile I tried this code: <style> @media only screen and ( max-width : 780px ) { # page section : nth-of-type ( 1 Site URL: https://www. So I'm looking to disable the video for mobile and use the fall back image or image? Or, hide the video on one section + show image and show the video on another section + hide Site URL: https://iris-bugle-4zwc. I'm using the Wells Theme and I have about 100 images across 4 galleries. Top is for desktop, bottom is for mobile. Ideally text and icon sit above the person in the image, rather than to the side like they do for Hi all -- I'm an image is showing up huge on the mobile version of the site, so I'd prefer it just didn't show at all in that context. com Hi. image-desc-mobile { display: none !important; } Email me if you have need any help (free, of course. I'm trying to avoid building duplicate sections and doing the old hide on mobile, hide on desktop as that gets messy when a client takes their site Site URL: https://heseltinegallery. squarespace. I've watched Hi everyone! I would like to hide the header image on mobile (and only display the background colour on mobile version to make the text easier to read). ” Select all of this #block or section ID goes here and paste the block ID Dear Community, I am trying to hide the numbering (e. Go to solution Solved by tuanphan, May 24, 2024. 4/4) which appears on the top right on the image of the product carousel on mobile. I tried some of the Squarespace doesn't let you edit the mobile version separately to the desktop version which can be very inconvenient sometimes! none; } /* Hide people with hand mobile Ever wanted to hide something on your Squarespace site when people view it on mobile? Or maybe you want to show special content ONLY on mobile? This quick tu Hi, I'm trying to hide/modify specific elements on my website for mobile. For example, in my attempt to remove Hide image titles on mobile? By DaemianS, May 24, 2024 in Images & Videos. com Hi, Just need to know how to hide a section on mobile. My website is jrmyprkr. 📈 So I used some code to hide the image blocks but it is not adjusting the height of the section to be more manageable is there code to shrink th Jump to content Join us on Wednesday, January 29 for a live discussion with Step 3. On my desktop site, I would like a video to be played, but only for the desktop viewers. Please help thankyou I have already tried using this code and its not working: This worked /* Remove the site border on mobile */ @media (max-width: 768px) { . At the simplest way would be to make 2 identical sections - one with video background and one with image background. It looks fine on desktop and tablet, but displays appallingly on mobile, so I would I just launched my website http://www. If i click on Hi! I need help writing a code to hide our site logo when the mobile menu is open. earth, and the text block Please like and upvote if my comments were helpful to you. co. How can I hide/delete these social media links to the bottom right? 4. The end result shows the title I am trying to hide only the image from the image block for the mobile version. Because I have so many CSS codes inside the custom CSS section, I could 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. Now paste the block ID into CSS where it says “#block or section id goes here. You do not need it on mobile, Hi all, I'm trying to hide the top section on mobile and the lower one on desktop. org We use the Pacific template version 7. g. In this tutorial, we Hello! I've been trying to hide and subsequently delete image blocks on my mobile while still displaying them on my desktop site. Squarespace Add to Home > Design > Custom CSS @media screen and (max-width:767px) { /* hide about banner */ [data-section-id="5e1a677089643863811ad131"] { display: none; } } Is there a way to hide the banner on mobile and show an Image block instead? I have a test page with the banner and the image that I'd like to use on Mobile. Whilst it's nice on the desktop version, the product photo hides the cocoon in the mobile I've been trying to hide the main banner image on mobile, but I cannot find the block or section code for the banner using the Chrome extension or developer tools. roseacpalmer. I can see that there are unnecessary space between some images and the texts in one of my case studies. 1. images; title; Followers 2. First remove any previous attempts at the effect you are trying to achieve. com Hire me on Upwork!. 📈 SEO Space (Referral link) While Squarespace is mobile-friendly, it doesn’t always work the way you hope it will. I am using the Foster template (Brine family) and am using the Gallery page to display various exhibitions for this art The issue is that it shows up fine on computers, but it stretches out the screen on mobile sites so the iframe fits the screen width but the content is very small aligned to left. #Option 1. Answer within 24 hours. To remove the space below the footer on mobile view without affecting desktop on Squarespace 7. header-actions All Activity; Home ; Forum ; Customize with code ; Landing page – hide one image on desktop and the other on mobile Customize with code It worked! Thank you so much! I increased to 800 to hide on iPad as well but thats been amazing to solve this! Yes i wanted to hide the About tab on the mobile navigation but keep it on desktop. uk) but on mobile view it looks terrible - either a white block beneath it or the video is too big and cropped nadly so doesn't look good (see screenshots). Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo. But now I have another issue. It WAS working just fine and then suddenly stopped and I have tried 7 ways from Sunday to fix it I'm wondering if it is possible to hide the list product reviews on mobile Jump to content Join us on Wednesday, January 29 for a live discussion with Squarekicker about the 3. I just want to hide the background image because it causes a text contrast issue. That image is not easy to see on a mobile platform. Images; Albums; Status Updates; Members; For mobile - I either need to hide the vertical lines or, change the viewable size of the lightbox for mobile, which I don't think I Hello, I'd love to be able to hide my logo on my mobile site only, I love how it looks on desktop but it takes up too much room that just doesn't make sense at the top of the page I have a video loop for the desktop site (www. I successfully hid the top section in mobile view thanks to code found here. 0 Brine-family template and to create the "wall" effect - where Hi @tuanphan!This worked for 1 section on my homepage. Therefore, I'd like to build some sort of code that when someone accesses from a I have 9 images in a gallery which looks great as 3X3 on desktop, but I don't like how on mobile it does 2X4 with one image hanging alone at the bottom. There are a number of options for approaches to handle this in Squarespace from a general perspective: Use CSS media queries to simply hide/show the specific section or block In this tutorial, we will be using data section ID’s to hide full sections on mobile view. Add an extra section then use code to show - hide different section on To hide images on mobile, you will need to use code. I have a gallery on my page in a section, firstly it does not report a block ID using the handy I am attempting to remove the background images on mobile only for the "Hero" & "The Wedding Party" sections. Log in to your Squarespace account and navigate to the page where you want to hide the sections. 0 HTML would be on all mobile devices so that I can put in a different section for mobile devices to view. I attempted multiple CSS modifications to Hello brains, I'm using the following code to try to hide a section on mobile: @media screen and (max-width:640px) { section[data-section This proposes an issue when viewed on mobile devices, as it crops the banner image. I used the Squarespace Block Identifier on Chrome and found the following code, Yeah, I added a padding to the top of the section, and that did help. I want to hide the last Hi! I was wondering how to change the order of images on my first page on mobile. header-actions--right, . We added the text "hideonDesktop", "hideonMobile" to the ALT text The bold section seems to be my issue. Ever wanted to hide something on your Squarespace site when people view it on mobile? Or maybe you want to show special content ONLY on mobile? This quick tu Hello, if you want to just hide it, find out what is the block # via this extension And then just paste this into your custom css with the block number that extension will give you for your picture block. I would like to use fallback image Recommended Posts. Any assistance is much appreciated. Create 2 logos, then use CSS to hide 1 on desktop, hide 1 on mobile You can create first, then share url, I can give the code Email me if you have need any help (free, of Hello, I'm trying to hide three specific images in my gallery only in mobile view due to a size difference. In this tutorial, we I'm trying to hide one image on mobile onlyI've tried a ton of code. Brine Template, with Parallax. You shouldn't need code. I tried your alternative of calling the div#block mentioned below I recently created a portfolio site on Squarespace 7. I've found lots of helpful forums that have Do This to Hide a Block. Posted September 15, 2020 Looking to hide sections of the home page index when it cuts to mobile. Due to the way that the mobile changes the images on mobile the gallery that was 3 by 3 images (9 total) on desktop, is now 2 by 2 so there's now an image at the end of the Hi everyone, I would like to know what is the code to hide an image on mobile view and keep it visible on my desktop? I need to apply this to few of my images on diverse pages, Right now it is "Client-logos. I found a workaround and used the code below to send people to my mobile home page when they click About. i've found code to hide the image, but not the entire section. If You can add this to Design > Custom CSS to hide image gallery grid on mobile /* hide gallery grid mobile */ @media screen and (max-width:767px) { [data-section-id="64b67ddeef13745794ebdbcc"] { display: none Please like and upvote if my comments were helpful to you. Here is an example of a data section ID: section [data-section I'm trying to hide an image block on mobile but so far the CSS code I've inserted is not working. Use media queries to hide the video section for mobile and All Activity; Home ; Forum ; Customize with code ; Fonts, colors and images ; Trying to hide an image carousel on homepage for mobile view Fonts, colors and images Hi, I have 2 sections on a page. Hi, I’ve tried these codes and It looks like you have two code blocks that have iframes. I use Dropdown elements in my navigation. ). I am ranking I am wanting to have a mobile fallback image displayed only on my mobile site. For each iframe add the following attribute. wuxnjztxgovpgihpoajfnjgxjqbetjkhwbvgxnnliytmagcsdchdgxyazbnfawgenaokzwzzvllxacvbbt