Hello There,
We can use a filter to show it on homepage only. Let’s try using this function: is_home(). Try the following code.
// Add custom content below the masthead
// =============================================================================
function custom_content_below_masthead() {
if(is_home()){?>
<div class="x-section pan" style="margin-top: 150px;">
<div class="x-container max width mobile-adjustment">
<div class="x-column x-sm x-1-3">
<a href="#">
<img src="//placehold.it/300x300" alt="my-image">
</a>
</div>
<div class="x-column x-sm x-1-3">
<a href="#">
<img src="//placehold.it/300x300" alt="my-image">
</a>
</div>
<div class="x-column x-sm x-1-3">
<a href="#">
<img src="//placehold.it/300x300" alt="my-image">
</a>
</div>
</div>
</div>
<?php }}
add_action('x_after_view_global__slider-below', 'custom_content_below_masthead');
// =============================================================================
2.) On above code, I have added the following class: mobile-adjustment on the container. Then add the following custom CSS on Theme Options > Custom CSS
@media(max-width:480px){ /*This custom CSS will only work for 480px screen and below*/
.mobile-adjustment .x-column {
margin-bottom: 20px; /*Add 20px space between the columns*/
text-align: center; /*To center image inside the column*/
}
}
To learn more about media query see this: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this helps. Further customization from here would be outside the scope of our support. Thank you for understanding.