Customize "Image with text" section

This article hasn't been revised for version 3.x

Swap the "heading" and "text" position 

Please open the  sections/image-with-text.liquid file and change the "title" code position before the "caption" code. So this code:

{% unless block.settings.title == blank %}
   <h2 class="title {% unless block.settings.button != blank %} add-hr {% endunless %}">
      {{ block.settings.title | escape }}
   </h2>
{% endunless %}
needs to go before this one ( screenshot):

{% unless block.settings.caption == blank %}
     <p class="caption">{{ block.settings.caption | escape }}</p>
{% endunless %}

Change the "image with text" section font size

To change the text size here, please use this CSS code at the end of the assets/theme.css file (on older theme versions assets/css_main.scss.liquid file):

  • for the "heading":
.site-box.box__image-text .title { font-size: 8vmin !important; }
  • for the "text":
.site-box.box__image-text p { font-size: 3vmin !important; }

Remove the section animation effect

To disable the "image with text" rollover effect please add this CSS code at the end of the  assets/theme.css file:

.site-box.box__image-text .site-box-background {
    transform: none !important;
}

To also remove the overlay color when hover, please use:

.site-box.box__image-text .site-box-background:after {
    display: none !important;
}

Change the default size boxes when using 3 images in an "image with text" section

As you already know, the theme design for 3 images with text inserted in the same section is to display the first image as a large full screen height image and the other two images as 50% height in the right box (except on mobile where all 3 are stacked). If you want to customize this it will be possible with a bit of custom CSS.  

Please use this CSS code at the end of the  assets/theme.css file:

@media (min-width: 481px) {
  .site-box.box__image-text.box--big, .site-box.box__image-text.box--small-lg {
    width: 33.33% !important;
    height: 50vh !important;
    min-height: 50vh !important;
  }
}

Note that in case you have similar sections where you want to keep the original section design you'll need to target this particular section id and add it in the code. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.