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
  • Views 529
  • 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;
}

 

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

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

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.