Custom code for Summary Block (and Image)

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!

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;
}

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

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!

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;
}
}

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!

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;
}
}