Jump to content

Custom code for Summary Block (and Image)

Recommended Posts

Site URL: https://hawk-walrus-dxd2.squarespace.com/

Hi!

I would like my red summary box (header is SALAT) on the front page to be attached to the image to the left.

This I have done, however I would like to make it look nice and I have problems with the following:

1. Have the summary block and image next to each other without any space (on desktop and mobile)

2. Make the summary block same height as image and also responsive.

3. Translate the 'Read more' to own language.

pw to site is xenia.

Thank you in advance for your help!

Best regards!

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

2 hours ago, WebWhizz said:

Site URL: https://hawk-walrus-dxd2.squarespace.com/

Hi!

I would like my red summary box (header is SALAT) on the front page to be attached to the image to the left.

This I have done, however I would like to make it look nice and I have problems with the following:

1. Have the summary block and image next to each other without any space (on desktop and mobile)

2. Make the summary block same height as image and also responsive.

3. Translate the 'Read more' to own language.

pw to site is xenia.

Thank you in advance for your help!

Best regards!

For the read more changing, you can try adding to Home > Design > Custom Css

.summary-read-more-link {
  visibility: hidden;
}
.summary-read-more-link:after {
  content:'your read more →';
  visibility: visible;
}

 

Greeting, it's 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, Keyword Highlighter
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

Make the first summary block  same height as image

#block-yui_3_17_2_1_1646734311928_4452 + .sqs-row {
  display: flex;
}

#block-yui_3_17_2_1_1659089505117_14251 {
  padding: 0;
}

#block-yui_3_17_2_1_1659087271330_7372 {
  margin-left: 0;  
  height: 100%;
  box-sizing: border-box;
}

Let me know how it works

Greeting, it's 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, Keyword Highlighter
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

Hello! Thank you so much for your help! It looks great, however two problems:

1. The red box should be same size as image no matter what screensize, and it is not

2. The image is now missing on mobile

I hope you can help again? Once again thank you very much!

Link to comment
On 8/2/2022 at 2:32 PM, WebWhizz said:

Hello! Thank you so much for your help! It looks great, however two problems:

1. The red box should be same size as image no matter what screensize, and it is not

2. The image is now missing on mobile

I hope you can help again? Once again thank you very much!

#2. With problem 2, add this code under

@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1646734311928_4452+.sqs-row .span-6 {
    width: 100% !important;
}
#block-yui_3_17_2_1_1646734311928_4452+.sqs-row {
    flex-direction: column;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Hi!

Thank you so much! It is now visible on mobile! 😄

Is someone able to help with the red box being same height as image no matter what screen size?

My code is this now:

 

#block-yui_3_17_2_1_1659087271330_7372
{
color: #ffffff;
background: #ff1f0a;
  padding: 50px;
margin-left: -20px;}

#block-yui_3_17_2_1_1646734311928_4452 + .sqs-row {
  display: flex;
}

#block-yui_3_17_2_1_1659089505117_14251 {
  padding: 0;
}

#block-yui_3_17_2_1_1659087271330_7372 {
  margin-left: 0;  
  height: 100%;
  box-sizing: border-box;
}

@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1646734311928_4452+.sqs-row .span-6 {
    width: 100% !important;
}
#block-yui_3_17_2_1_1646734311928_4452+.sqs-row {
    flex-direction: column;
}
}

 

And the whole box (image + red box) is wider than the rest of the boxes on the front page. Can it be the same as the rest?

Hope someone can help and thank very much in advance!

Link to comment
On 8/12/2022 at 5:03 PM, WebWhizz said:

Hi!

Thank you so much! It is now visible on mobile! 😄

Is someone able to help with the red box being same height as image no matter what screen size?

My code is this now:

 

#block-yui_3_17_2_1_1659087271330_7372
{
color: #ffffff;
background: #ff1f0a;
  padding: 50px;
margin-left: -20px;}

#block-yui_3_17_2_1_1646734311928_4452 + .sqs-row {
  display: flex;
}

#block-yui_3_17_2_1_1659089505117_14251 {
  padding: 0;
}

#block-yui_3_17_2_1_1659087271330_7372 {
  margin-left: 0;  
  height: 100%;
  box-sizing: border-box;
}

@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1646734311928_4452+.sqs-row .span-6 {
    width: 100% !important;
}
#block-yui_3_17_2_1_1646734311928_4452+.sqs-row {
    flex-direction: column;
}
}

 

And the whole box (image + red box) is wider than the rest of the boxes on the front page. Can it be the same as the rest?

Hope someone can help and thank very much in advance!

Use this CSS

@media screen and (min-width:1800px) {
div#page-62010982157ad22b297bd6e9 .image-block figure {
    background-color: red;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.