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://
Link to comment
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)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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!

 

Link to comment
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)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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!

 

Link to comment
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
Link to comment
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)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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!

 

Link to comment

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)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

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!

 

Link to comment

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.