tuanphan Posted June 12 Share Posted June 12 On 6/11/2024 at 1:50 AM, mariaavecchi said: Thank you so much, tuanphan!! It worked but the images' frames are still on the mobile version, occupying their spaces. And when I delete them, they disappear on the desktop version... Could you please help? With your case, will need to change a bit layout on mobile to achieve this. Can you let me know which exact images you want to remove on mobile? I will adjust and give you new code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mariaavecchi Posted June 13 Share Posted June 13 (edited) OK, thank you. If you enter the site/mobile version, you will see that the last images desappeared like we wanted. But thier frames are still there (that frame sayng: image). I would take these out: #block-8c47d91736810cffc7e5 (image) #block-331a7886e821a5327e29 (subtitle) #block-92eb43d1107664c91aef (image) #block-8d546c72e459fd89267f (subtitle) #block-848bc2c19a282a429dde (image) #block-848bc2c19a282a429dde (subtitle) But please tell me what you did in case in the future I want to change the images, ok? Thank you!! I also have another problem: at the top of my site there is a gallery which keeps changing the image. On the desktop version the image sizes and clips are ok. But on the mobile version, some images appear too big (with a close up) and need adjustment. Thank you! Edited June 13 by mariaavecchi Link to comment
tuanphan Posted June 17 Share Posted June 17 On 6/13/2024 at 10:12 PM, mariaavecchi said: OK, thank you. If you enter the site/mobile version, you will see that the last images desappeared like we wanted. But thier frames are still there (that frame sayng: image). I would take these out: #block-8c47d91736810cffc7e5 (image) #block-331a7886e821a5327e29 (subtitle) #block-92eb43d1107664c91aef (image) #block-8d546c72e459fd89267f (subtitle) #block-848bc2c19a282a429dde (image) #block-848bc2c19a282a429dde (subtitle) But please tell me what you did in case in the future I want to change the images, ok? Thank you!! I also have another problem: at the top of my site there is a gallery which keeps changing the image. On the desktop version the image sizes and clips are ok. But on the mobile version, some images appear too big (with a close up) and need adjustment. Thank you! https://dalmatian-tomato-n9s7.squarespace.com/?noredirect Use this new CSS code @media screen and (max-width:767px) { #block-8c47d91736810cffc7e5, #block-331a7886e821a5327e29, #block-92eb43d1107664c91aef, #block-8d546c72e459fd89267f, #block-848bc2c19a282a429dde, #block-848bc2c19a282a429dde { display: none !important; } [data-section-id="6616f27b5a0700917a92ec7d"] { .fluid-engine>div { grid-area: unset !important; display: block !important; width: 100% !important; margin-bottom: 20px; } .fluid-engine { display: block !important; padding-left: 6vw; padding-right: 6vw; } .fluid-engine .sqs-block-image .design-layout-fluid * { position: relative !important; width: 100% !important; } .fluid-engine .sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img { position: static !important; object-fit: cover !important; } .fluid-engine { padding-top: 100px; }}} mariaavecchi 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ForestFern Posted June 19 Share Posted June 19 @tuanphan I used the code linked in your blog (thank you!) but although it worked in the editor view, it didn't work in the external view. I'm only trying to target a single section so I don't think I need the HTML code anyway, but I can't get the CSS to work. I created two sections in order to have two different background images, and I want one to show on mobile and one on desktop. It is working on and off, but I can't get both mobile and desktop to hide consistently. This is my code: @media screen and (min-width: 768px) { #section[data-section-id="6672853b520cfe46f40dbbfe"].hide-on-mobile { display: none !important; } } @media screen and (max-width: 767px) { #section[data-section-id="6672853b520cfe46f40dbc01"].hide-on-desktop { display: none !important; } } esperanzacommunityhousing.org/schtest pass: sqs Link to comment
mariaavecchi Posted June 20 Share Posted June 20 (edited) Hi, @tuanphan. It worked!!! Thank you! But new issues appeared: On the mobile version, a space right below the button "Get in touch!" + the line of text, and the first image (#block-6616f27bb6436dcd54df26a7). The caption #block-6616f27b026461203d981e56 is not in the right place (below #block-6616f27bb418799528c7e218), it's below #block-6616f27ba3399421ad25ae93 and on top of #block-6243a8731388125bb092. The line (#block-yui_3_17_2_1_1715277760206_23440) which separates the images and my photo, changed place too: it's now between #block-57a47046407e5d9684b8 and its caption #block-e6fb62f8a9374a7dd772. Btw, on the mobile version, if I click on edit section, the grid behind the images (I had upgraded this section) looks different now. It has vertical stripes intead of showing the rectangles. Thank you!! Edited June 20 by mariaavecchi Link to comment
tuanphan Posted June 23 Share Posted June 23 On 6/19/2024 at 2:23 PM, ForestFern said: @tuanphan I used the code linked in your blog (thank you!) but although it worked in the editor view, it didn't work in the external view. I'm only trying to target a single section so I don't think I need the HTML code anyway, but I can't get the CSS to work. I created two sections in order to have two different background images, and I want one to show on mobile and one on desktop. It is working on and off, but I can't get both mobile and desktop to hide consistently. This is my code: @media screen and (min-width: 768px) { #section[data-section-id="6672853b520cfe46f40dbbfe"].hide-on-mobile { display: none !important; } } @media screen and (max-width: 767px) { #section[data-section-id="6672853b520cfe46f40dbc01"].hide-on-desktop { display: none !important; } } esperanzacommunityhousing.org/schtest pass: sqs Follow this instead Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Simone1998 Posted July 9 Share Posted July 9 (edited) Hey, I'm working on my client's website. I designed a background but on mobile version it doesn't work. I'd like to hide the "Experiences" background only on Mobile. Can someone help me? Website: https://turbot-elephant-gj7r.squarespace.com/config/ Password: 1234ciao Edited July 9 by Simone1998 Link to comment
JessicaM Posted July 9 Share Posted July 9 (edited) @Simone1998 If you just want to remove the background of that section from mobile, then use this: #collection-663c997cd6956c03414b66d6 { @media only screen and (max-width:640px){ #page .page-section:nth-child(1) .section-background img { opacity:0; } However, if you want to replace that background with another background for mobile, then follow this post - https://www.jessicamiller.work/blog/how-to-replace-a-background-image-for-mobile Edited July 9 by JessicaM Simone1998 1 Jessica Miller | Squarespace Website Designer https://www.jessicamiller.work jessica@jessicamiller.work Search the blog and get Squarespace tips to your inbox https://www.jessicamiller.work/blog Want to pick my brain or get help? Book a free 15 minute call. If my post solved your problem, please mark it as the solution - thanks! Link to comment
Simone1998 Posted July 10 Share Posted July 10 9 hours ago, JessicaM said: @Simone1998 If you just want to remove the background of that section from mobile, then use this: #collection-663c997cd6956c03414b66d6 { @media only screen and (max-width:640px){ #page .page-section:nth-child(1) .section-background img { opacity:0; } However, if you want to replace that background with another background for mobile, then follow this post - https://www.jessicamiller.work/blog/how-to-replace-a-background-image-for-mobile Hi Jessica, thanks for the quick reply. Unfortunately it doesn't seem to work 😞 I attach a screenshot, as you can see the background remain visible on mobile version. Link to comment
JessicaM Posted July 10 Share Posted July 10 @Simone1998 1. This is a different section than the Experiences background... do you want the Strategy background removed too? It will take a different set of code. 2. There's an error message in your code that says a parentheses is missing somewhere. 3. For the code at the top of your CSS, you can remove the <style> & </style> tags. Feel free to send me a DM. Simone1998 1 Jessica Miller | Squarespace Website Designer https://www.jessicamiller.work jessica@jessicamiller.work Search the blog and get Squarespace tips to your inbox https://www.jessicamiller.work/blog Want to pick my brain or get help? Book a free 15 minute call. If my post solved your problem, please mark it as the solution - thanks! Link to comment
PMRUK Posted July 15 Share Posted July 15 Hi there, Trying to show a different image on desktop vs. mobile. Site is http://gettough.app pwd: `theideaworks`. Section is: section[data-section-id="66952fccc85676482719d347"] I'd like to use `Tough-mind-isometric-mock.jpeg` on desktop and `Tough-mind-isometric-mock-portrait.png` on mobile. Can't quite work out the CSS. Any help gratefully received! Thanks Link to comment
PMRUK Posted July 16 Share Posted July 16 OK, I managed to make it work by showing/hiding the various elements using `@media screen` etc., but now my in-page links are a bit skewed. It seems that by hiding sections, the anchor links are all offset. Any idea how to fix this? Thanks Link to comment
JessicaM Posted July 16 Share Posted July 16 @PMRUK For starters, the anchor links aren't set up correctly. You need to add a code block to the section you want the link to jump to, then point to the code in the link URL. Here is a guide - https://www.jessicamiller.work/blog/how-to-add-anchor-links It sounds like you got the background image to work, but if it's not working like you want, you can follow this tutorial - https://www.jessicamiller.work/blog/how-to-replace-a-background-image-for-mobile Jessica Miller | Squarespace Website Designer https://www.jessicamiller.work jessica@jessicamiller.work Search the blog and get Squarespace tips to your inbox https://www.jessicamiller.work/blog Want to pick my brain or get help? Book a free 15 minute call. If my post solved your problem, please mark it as the solution - thanks! Link to comment
HJCarley Posted August 16 Share Posted August 16 Hi, I'm also trying to have a different image on mobile and desktop. I don't just want to resize the image as I need the text to be legible. Are you able to provide the correct code? Site- https://icosahedron-gar-d6cc.squarespace.com/config/pages/website-tools pwrd- Wiseheart01!! It's these two images- Link to comment
tuanphan Posted August 17 Share Posted August 17 18 hours ago, HJCarley said: Hi, I'm also trying to have a different image on mobile and desktop. I don't just want to resize the image as I need the text to be legible. Are you able to provide the correct code? Site- https://icosahedron-gar-d6cc.squarespace.com/config/pages/website-tools pwrd- Wiseheart01!! It's these two images- Which page are you referring to? https://icosahedron-gar-d6cc.squarespace.com/?noredirect Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment