Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Need help with Ghost pricing plugin (tablet & mobile size)


Claire_auck

Question

Site URL: https://compass-pilates.squarespace.com/pricing

I hope someone CSS help 🙂

https://compass-pilates.squarespace.com/pricing
pa33word

I have used the awesome Ghost Pricing Block plug-in and it's working really well on desktop and mobile.

Tablet size needs some attention as the content breaks out of the container. Do I need to add an additional style for tablet? If so...how?

This is what's currently in place for mobile.
@media (max-width : 1300px) { .sqs-block-markdown {

I have attached a screenashot with all 3 sizes and as you can see, the middle (tablet) is flowing outside of the green box.

Fingers crossed someone can help me fix this.
Cheers
Claire.

 

Responsive.png

Link to comment

5 answers to this question

Recommended Posts

  • 0

SOLVED!!!!

@tuanphan was able to help with this  

We added the code (below) to the page header to create 2 columns per row on tablet size and it works a treat!
 
Thanks for everyone that helped!
 
<style>
@media screen and (max-width:900px) and (min-width:641px) {
div#page-5f0cf7cd8480bd4a7f209852>.row:nth-child(2)>.col {
width: 50%;
}
}
</style>
Link to comment
  • 0

You can try this

@media (max-width : 1024px) { 
  [data-collection-id="5f0cf7cd8480bd4a7f209852"] .sqs-col-3 {
    width: 50%;
  }
}

image.png.bd12a33f5134c566516acbd9094c37db.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

Please add it into next line

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, 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...