Summary Block - Space between Image and Excerpt

Site URL: https://www.identitybuiltbranding.com/ressources

Hi!

I wonder how I can adjust the spacing between the image and the excerpt field on a summary-block with 7.1

This is the URL: https://www.identitybuiltbranding.com/ressources

Below the "Events" I added a summary-block and I'd like to adjust the spacing between image and text. 

Any help is appreciated!
Julius

Hey Julius, interesting question and I can confirm this is more difficult that it seems. The problem we run into here is with alignment. In a summary block, that spacing is controlled by the padding of the image. But if we adjust that padding, it will misalign this block with the others on the page. You can see what I mean by adding in this bit of Custom CSS

.summary-thumbnail-container{
  padding-right:40px !important 
}

So what we need to do is remove that padding entirely. Add in margins on the content element and the image element and then resize those elements. This CSS should do it:

@media(min-width:767px) {
  #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-container{
   padding-right:0px !important 
  }
  #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-outer-container {
    width: ~'calc(50% - 17px)' !important;
    margin-right: 17px !important;
  }
  #block-yui_3_17_2_1_1617916128409_10322 .summary-content{
    width: ~'calc(50% - 17px)' !important;
    margin-left: 17px !important;
  }
}

I also wrapped it in media queries so that it only happens on desktop, and I added the block level id in front of each selector so that this code only applies to this one summary block. 

@WillMyers - thank you so much. Let me try that - I will keep you posted 🙂

Hi  @WillMyers - fantastic! It worked. Now, I am struggling with the mobile view. Any idea how to make the look equal with the upper part of the site. 

I appreciate your help! Mahalo

Ahhh, try adding this second media query to adjust things on mobile. 

@media(min-width:767px) {
  #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-container{
   padding-right:0px !important 
  }
  #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-outer-container {
    width: ~'calc(50% - 17px)' !important;
    margin-right: 17px !important;
  }
  #block-yui_3_17_2_1_1617916128409_10322 .summary-content{
    width: ~'calc(50% - 17px)' !important;
    margin-left: 17px !important;
  }
}
@media(max-width:767px) {
  #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-container{
    padding-right:0px !important 
  }
  #block-yui_3_17_2_1_1617916128409_10322 .summary-thumbnail-outer-container{
    width:100% !important;
    padding-right:0px !important;
  }
  #block-yui_3_17_2_1_1617916128409_10322 .summary-content{
    width: 100% !important;
    margin-top: 34px !important;
  }
}

On 4/9/2021 at 10:51 AM, juliusgeis said:

 thank you so much. Let me try that - I will keep you posted 🙂

I see the site has also other problems. If you need to fix, just reply here.

Site URL – https://www.identitybuiltbranding.com/

1. (Tablet-Footer) Want to increase column width to preven text break?

2. (Tablet-Resources) Want to increase these text width?

3. (Overlay Menu) Want to show logo on this?

4. (Mobile-ibb) Resize image