feefee1 Posted May 30 Posted May 30 (edited) Hi I have added 2 accordions to the draft services page on the website ( https://alexanderphilip.com/services ). When you view the page on a desktop the text block "other services" (nearer the bottom) is spaced beautifully below the first accordion. 👍🏻 When you look at the page on a mobile, the text block for "other services" moves up and is too close to the last item in the "services" accordion - "post completion" . I'd like the spacing on mobile and desktop to be consistent if possible and assume I need to use css code to correct this error. Something like: @media screen and (max-width:760px) {.accordion*.* {padding-bottom: 15px !important; } } But I'm not sure which selectors to use to resolve the issue. Can anyone help? Thank you Edited May 30 by feefee1 adding https:// Beyondspace 1
Beyondspace Posted May 30 Posted May 30 1 hour ago, feefee1 said: Hi I have added 2 accordions to the draft services page on the website ( https://alexanderphilip.com/services ). When you view the page on a desktop the text block "other services" (nearer the bottom) is spaced beautifully below the first accordion. 👍🏻 When you look at the page on a mobile, the text block for "other services" moves up and is too close to the last item in the "services" accordion - "post completion" . I'd like the spacing on mobile and desktop to be consistent if possible and assume I need to use css code to correct this error. Something like: @media screen and (max-width:760px) {.accordion*.* {padding-bottom: 15px !important; } } But I'm not sure which selectors to use to resolve the issue. Can anyone help? Thank you Try adding Custom css @media only screen and (max-with: 767px { .fe-block-yui_3_17_2_1_1716461544359_30334 { grid-area: 14 / 2 / 15 / 20; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!
feefee1 Posted May 30 Author Posted May 30 Thanks @Beyondspace but that doesn't seem to have helped...the "other services" text box is too near the bottom of the accordion "post completion"...
Beyondspace Posted May 30 Posted May 30 24 minutes ago, feefee1 said: Thanks @Beyondspace but that doesn't seem to have helped...the "other services" text box is too near the bottom of the accordion "post completion"... Where did you put my above code? Can you share its screenshot. Currently I can not find my code on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!
feefee1 Posted May 30 Author Posted May 30 (edited) @Beyondspace - I placed the code in >Website Tools >Custom CSS (NB there was a typo in "width" but have changed it but it still makes no difference! Edited May 30 by feefee1 Noticed a typo in the code
Beyondspace Posted May 31 Posted May 31 23 hours ago, feefee1 said: @Beyondspace - I placed the code in >Website Tools >Custom CSS (NB there was a typo in "width" but have changed it but it still makes no difference! I still can't find my code on my end, kindly try adding ";" after box-shadow and margin-left on the above BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!
feefee1 Posted June 2 Author Posted June 2 @BeyondSpace - thanks I've added the missing punctuation but it still doesn't change the positioning of the Text on mobile .....Any other suggestions? Thanks
Beyondspace Posted June 5 Posted June 5 Opps, I find that the above code is wrong in syntax. Try again @media only screen and (max-width: 767px) { .fe-block-yui_3_17_2_1_1716461544359_30334 { grid-area: 14 / 2 / 15 / 20; } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!
feefee1 Posted June 6 Author Posted June 6 @Beyondspace - no I tried that and it messed up a whole load of my other css codes. Still not working.... Thanks
tuanphan Posted June 8 Posted June 8 @feefee1 I think you need to use this @media only screen and (max-width: 767px) { .fe-block-yui_3_17_2_1_1716461544359_30334 { grid-area: ~"14 / 2 / 15 / 20" !important; } } 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment