Custom coding for buttons

Site URL: https://alexandrahall.squarespace.com

Hey community!

I am doing a project for a program I am in where we are asked to recreate a site that already exists. I chose: www.cascobotanicals.com 

I am trying to get the buttons to look like the ones on my inspo site. But it seems very tricky and confusing. My squarespace site is https://alexandrahall.squarespace.com and password is brineintopedro

Any idea how to get the buttons to look somewhat like the ones on www.cascobotanicals.com ? I attached a photo of what they look like below. Thanks so much.

The font being used is Ambit. That isn't a font SS has as far as I can see. If the font could be found that could be uploaded to your site and then it could be used. Alternately you could try to find a font with a similar right arrow style.

To add the arrow to your button I think you'll need to use use the ::after pseudo element to add it.

#block-yui_3_17_2_1_1618017340534_2404 .sqs-block-button-element::after {

  content : ' →';
  
  }

On 4/10/2021 at 6:23 PM, creedon said:

The font being used is Ambit. That isn't a font SS has as far as I can see. If the font could be found that could be uploaded to your site and then it could be used. Alternately you could try to find a font with a similar right arrow style.

To add the arrow to your button I think you'll need to use use the ::after pseudo element to add it.

#block-yui_3_17_2_1_1618017340534_2404 .sqs-block-button-element::after {

  content : ' →';
  
  }

 

Thanks so much! Any idea how to get the button to move upwards toward the photo? 

#block-yui_3_17_2_1_1618008422689_8375 {

  padding-bottom : 0;
  
  }

#block-yui_3_17_2_1_1618008422689_8375 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {

  margin-bottom : 0px !important;
  
  }

Let us know how it goes.

3 hours ago, creedon said:

#block-yui_3_17_2_1_1618008422689_8375 {

  padding-bottom : 0;
  
  }

#block-yui_3_17_2_1_1618008422689_8375 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {

  margin-bottom : 0px !important;
  
  }

Let us know how it goes.

This helped move them right underneath the photo which looks MUCH better. Thank you so much! But still not touching the photo, seems that is a bit tricky as I've tried a million things!

Next I'd suggest going after the margins and padding on top of the buttons.

#block-yui_3_17_2_1_1618017340534_2404 {

  padding-top : 0
  
  }

Although this looks like it will trigger the need for other changes.

On 4/13/2021 at 6:22 AM, thirdeyegyps said:

This helped move them right underneath the photo which looks MUCH better. Thank you so much! But still not touching the photo, seems that is a bit tricky as I've tried a million things!

The site has also some problems.

Site URL: https://alexandrahall.squarespace.com/

1. (Mobile-Homepage) Button text overflow

2. (Tablet-Homepage) Similar above

3. (Tablet-Homepage)

4. (Tablet-Science)

5. (Mobile-Science)

6. (Mobile-Science)

7. (Mobile-Overlay Menu) Make icon – instagram same line?

3 hours ago, tuanphan said:

The site has also some problems.

Site URL: https://alexandrahall.squarespace.com/

1. (Mobile-Homepage) Button text overflow

2. (Tablet-Homepage) Similar above

3. (Tablet-Homepage)

4. (Tablet-Science)

5. (Mobile-Science)

6. (Mobile-Science)

7. (Mobile-Overlay Menu) Make icon – instagram same line?

Hi Tuanphan. I was very worried about the mobile 😞 Any recommendations to fix all this?

11 hours ago, thirdeyegyps said:

Hi Tuanphan. I was very worried about the mobile 😞 Any recommendations to fix all this?

Q1. Q5. Q6. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* About casco button */
div#block-yui_3_17_2_1_1618270406081_16305 a {
    font-size: 24px;
}
/* Science q56 - your scient matters */
div#block-yui_3_17_2_1_1618083478688_40600 * {
    font-size: 50px;
}
/* Science q56 - the posibilities */
div#block-yui_3_17_2_1_1618083478688_54360 * {
    font-size: 50px;
}
}

18 hours ago, tuanphan said:

Q1. Q5. Q6. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* About casco button */
div#block-yui_3_17_2_1_1618270406081_16305 a {
    font-size: 24px;
}
/* Science q56 - your scient matters */
div#block-yui_3_17_2_1_1618083478688_40600 * {
    font-size: 50px;
}
/* Science q56 - the posibilities */
div#block-yui_3_17_2_1_1618083478688_54360 * {
    font-size: 50px;
}
}

 

Tuanphan! You are a saint. Any clue how to make the icon and instagram in the footer to be next to each other instead of on top of each other?

On 4/12/2021 at 12:29 PM, creedon said:

#block-yui_3_17_2_1_1618008422689_8375 {

  padding-bottom : 0;
  
  }

#block-yui_3_17_2_1_1618008422689_8375 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper {

  margin-bottom : 0px !important;
  
  }

Let us know how it goes.

Hi Creedon! This code helped me so much to bring the buttons close to the image. I'm trying to do the same thing to the buttons on the Science Page and the About Page but am having trouble finding the correct blocks to plug into the code?

I use a browser inspector myself.

block-yui_3_17_2_1_1618084883418_20055

block-yui_3_17_2_1_1618084883418_21352

block-yui_3_17_2_1_1618084883418_23163

block-yui_3_17_2_1_1618092079627_36371

block-yui_3_17_2_1_1618092079627_39417

block-yui_3_17_2_1_1618092079627_40872

3 hours ago, creedon said:

I use a browser inspector myself.

block-yui_3_17_2_1_1618084883418_20055

block-yui_3_17_2_1_1618084883418_21352

block-yui_3_17_2_1_1618084883418_23163

block-yui_3_17_2_1_1618092079627_36371

block-yui_3_17_2_1_1618092079627_39417

block-yui_3_17_2_1_1618092079627_40872

Thanks a million.

On 4/16/2021 at 8:16 AM, thirdeyegyps said:

Tuanphan! You are a saint. Any clue how to make the icon and instagram in the footer to be next to each other instead of on top of each other?

Add to Design > Custom CSS

/* footer instagram icon text */
div#block-yui_3_17_2_1_1618357904010_22796>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}