Jump to content

Accordion and Text Block too close together on mobile but spaced perfectly on desktop?

Recommended Posts

Posted (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 by feefee1
adding https://
Posted
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!

Posted

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"...

 

 

 

services  Alexander Philip architect copy.png

Posted
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"...

 

 

 

services  Alexander Philip architect copy.png

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!

Posted (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!

Screenshot 2024-05-30 at 17.16.39.png

Edited by feefee1
Noticed a typo in the code
Posted
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!

Screenshot 2024-05-30 at 17.16.39.png

I still can't find my code on my end, kindly try adding ";" after box-shadow and margin-left on the above

image.thumb.png.4752ffb6614f9e25bdbf821e4b8982e8.png

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!

Posted

@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

 

Posted

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!

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.