Jump to content

Space between code-blocks on five template in mobile view / help needed

Go to solution Solved by Beyondspace,

Recommended Posts

Hello!

On my home-site (www.beratung-und-betreuung.de) I have listed all of our names in code blocks. But in mobile view there is a huge space between the blocks.

I already had a solution with:

 

/* Mobile code blocks spacing */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_2_1457035305182_118918+.row .code-block {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}
}

But I changed the heading and now it's gone and I need help again (I am no website-designer).

Thank you very much!

Pablo

Link to comment
  • Replies 4
  • Views 268
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

7 hours ago, PabloHamburg said:

Hello!

On my home-site (www.beratung-und-betreuung.de) I have listed all of our names in code blocks. But in mobile view there is a huge space between the blocks.

I already had a solution with:

 

/* Mobile code blocks spacing */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_2_1457035305182_118918+.row .code-block {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}
}

But I changed the heading and now it's gone and I need help again (I am no website-designer).

Thank you very much!

Pablo

Do you mean these spaces?

image.png.8437162e3c63e7df265af5b4497169d2.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
  • Solution
13 hours ago, PabloHamburg said:

Yes. Thank you!

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_2_1503231843530_15991,
  #block-yui_3_17_2_2_1503231843530_21556, #block-yui_3_17_2_2_1503231843530_23168, #block-yui_3_17_2_2_1503231843530_27089 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

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.