Margin / Padding issues with Promo Banner Grid

Hi, I’m trying to mimic the Product Categories Grid Layout using the standard Promo Banner Element. I’ve tried it as many ways as I can think of and can’t figure it out.

See attached photo: Top is Product Categories (the size and spacing I want). Bottom is Promo Banner (I need to match, but can’t get it too).

I really wish the settings available in the Promo Banner were available in the Photo Grid and Product Categories elements (button, hover effect, layouts, etc). It’s the only element that gives me full control of the design, but I can make a grid.

Please log in and see Index Page.

Attachments:

You must be logged in to view attached files.

Hi iamaarongeorge,

Thanks for reaching to us.

1. In order to do that, you need to divide into columns like Product Categories, I created demo page so you can take a look the settings https://1j1.52c.myftpupload.com/22532-2/.

You may need to change banner size https://prnt.sc/98eM_jRLgPra

2. Add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

.promo-banner-wrapper .promo-banner .banner-image :is(img,picture,video) {
    width: auto;
}

.promo-banner-wrapper .promo-banner .main-wrapp-img{
    text-align: center;
}

Regards,

Thank you, it looks great now! The CSS really helped.

The images are low quality now though. Would the suggested size of 177×265 be the best size for me to export the original photos too for them to be sharp?

Hi iamaarongeorge,

I kindly recommend you use Photoshop or image editor to make it looks as you want, then upload to site and use it.

Regards,

Hi, I use Photoshop. I’ve attached two screenshots. In Photoshop the images are super sharp. In the Promo Banner Grid, they are blurry. The same images weren’t blurry in the Product Category Grid. What are the optimal settings and dimensions?

Attachments:

You must be logged in to view attached files.

Hi iamaarongeorge,

You are using large image, that’s why it caused the blurry. Please use smaller image that editted with Photoshop and remove Image size https://prnt.sc/3Cf6zp1W9ZCy

Please check your homepage again, it looked better. But, use PNG format instead.

Regards,

Hi, this is still giving me issues.

I have tried as many sizes as I can. I have the original .AI files and can export high-resolution in any size or format. I made a test page for you to look at with the same image in three different sizes.

311×350 pixels is ideal, but if I use PNG in any size, it’s blurry using Promo Banner.

The Image/SVG Element looks excellent, but it has no ‘Zoom’ effects or Text Banner Overlay options (this is something you should include in all image type elements).

Is it possible to use SVG in the Promo Banner Element?

Ultimately, I need something to be sharp and have the same effects I have on the Promo Banner.

Please help me solve this. I can make any image in any format.

Okay, it looks like I can use SVG in Promo Banner, but thumbnail, medium, and large are all the same image size, and if I set specific pixels the SVG disappears.

Hi iamaarongeorge,

I see the images are looking very well.

Do you need further helps?

Regards,

Hi, yes they look sharp now because I switched to SVG.

How do I resize the SVG?

Nothing I try changes the size. Thumbnail, Medium, Large and any Pixel amount is the same size.

Hi iamaarongeorge,

Please read the following article for help:
https://medium.com/@ayumitabinote/how-to-resize-a-svg-image-7829bac8948c

Regards,

[Author]

Posts