Adding 2 or 3 button rows on mobile (7.1) sitewide

Site URL: https://churchtownschoolofmusic.ie/

Hi folks,

I'm trying put 2 buttons in a row on mobile. Failing miserably, Is my "page id" the same thing  as my "collection id"?

/* Buttons side by side */
@media screen and (max-width:767px) {
div#page-5e7b7a293054960426046b4f .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-5e7b7a293054960426046b4f .span-12 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

Any thoughts?, sorry for the bother.

57 minutes ago, irishmusicschool said:

2 buttons in a row on

The usual Squarespace procedure for buttons is one-per-row. so i'd consider having regular text (2 words - each one linked an representing a button) and using CSS to turn it into a button

PS: regarding your question: usually it's best to target the block ID or CSS class (like e.g.

one example for each:

#block-yui_3_17_2_1_1607458165875_6808
{max-width: 60px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;}



.light-bold .sqs-block-button-element
{background-color: red !important }

5 hours ago, ArminB said:

The usual Squarespace procedure for buttons is one-per-row. so i'd consider having regular text (2 words - each one linked an representing a button) and using CSS to turn it into a button

PS: regarding your question: usually it's best to target the block ID or CSS class (like e.g.

one example for each:

#block-yui_3_17_2_1_1607458165875_6808
{max-width: 60px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;}



.light-bold .sqs-block-button-element
{background-color: red !important }

 

Much appreciated, I'll redouble my efforts. I had tried targeting the block ID at first but perhaps the code used was otherwise flawed. I'll get there!

You can also check out the Squarespace Marketplace and hire somebody for that task:
https://www.squarespace.com/designer/home

On 7/5/2021 at 6:39 PM, irishmusicschool said:

Site URL: https://churchtownschoolofmusic.ie/

Hi folks,

I'm trying put 2 buttons in a row on mobile. Failing miserably, Is my "page id" the same thing  as my "collection id"?

/* Buttons side by side */
@media screen and (max-width:767px) {
div#page-5e7b7a293054960426046b4f .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-5e7b7a293054960426046b4f .span-12 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

Any thoughts?, sorry for the bother.

 

 

I see some problems on your site. Do you need help on these?

Site URL – https://churchtownschoolofmusic.ie/

1. (Desktop – Header) Menu items  are cut into 2 lines.

https://churchtownschoolofmusic.ie/

2. (Desktop – Homepage) The amount of text in the block is different, so the block size is not equal.

https://churchtownschoolofmusic.ie/

3. (Mobile – Blog posts) Paginations are a bit close together.

https://churchtownschoolofmusic.ie/blog/7cbxf86lfofgabl4a9uoieqxy98jc4

4. (Mobile – Calendar) On the desktop you can see the whole picture. On mobile, the image is partially cropped.

https://churchtownschoolofmusic.ie/caln

5. (Tablet – Homepage) The width of the text is a bit small.

https://churchtownschoolofmusic.ie/

6. (Tablet – Footer) On desktop, these links are on one line. On tablet is cut into 2 lines.

https://churchtownschoolofmusic.ie/

7. (Tablet – Lessons) Button overlaps the button.

https://churchtownschoolofmusic.ie/Lessons

8. (Tablet – Calendar) Increase calendar width?

https://churchtownschoolofmusic.ie/caln

9. (Tablet – Pricing) The width of the block is a bit small

https://churchtownschoolofmusic.ie/pricing

10. Still have some other issues.