Classic Promo Boxes

I have added a row with three containers to a page and placed a classic promo box with an image and text link in each. With these is it possible to:

1 - Set the image to the same dimensions of across all boxes (at present one is shorter than others). Do I apply a CSS class and set a maximum height?

2 - Can I set a different link to each promo image or box? At present I have set the text to be a link, but I think clicking the image would work better for users.

I am still trying to get used to how elements respond responsively when they collapse so on the same page listed above I have one more question.

The top row is split into 1/3 text and 2/3 image. That looks fine until it hits the 767 breakpoint (tablet portrait) and mobiles. The text shows above the image, which is fine. But is there anyway to control this with CSS so at that breakpoint the image appears above the text? Or would I just duplicate the row and edit the second row to be visible on those breakpoints only and change the order that way?

Hi there,

Please kindly add the code below to Pro > Launch > Theme Options > JS:

jQuery('.x-promo-image-wrap').on('click touched', function() {
	window.location.href = jQuery(this).closest('.x-promo').find('.x-promo-content a').attr('href');
});

The code above will look on the images of the promo box when those images are clicked it will search for the title anchor tag and will redirect the page to that link.

Also kindly add the CSS code below to Pro > Launch > Theme Options > CSS to make the cursor show the image is linked:

.x-promo-image-wrap img {
    cursor: pointer;
}

That should do the trick.

Please kindly avoid asking additional questions in one thread. By keeping each question to its own thread you will help other customers to find the answer which might be their question too and also will help us to identify the problem easier and serve you better :slight_smile:

Regarding the second question you both can use the CSS code to add a specific class and use the Flexbox ordering system to change the order of the Text and Image while in the viewport lower than 767px with media queries. That will need custom coding. For more information:

As an alternative, you can hide the items for the mobile and tablet view and copy them with the other order and show them as you suggested at the end of your question.

Thank you.