Image Size in Glide Pages Container

Hi all!

I have an issue with the Background Image in the container component.

When viewing in mobile, it looks great, and also in the tablet view (with max padding), but for the Desktop view the image is cut of in the top and bottom.

Is this a sizing issue or how can I solve this?

I want a background image with buttons in the image, and the only way to do that seems to be using the Container block.

you can have a look at https://rost.digitalbysweden.com

The same image is trying to fit into containers with different size ratios. That’s why it gets cut off sometimes.

In my opinion, instead of using the background setting for a container, I would probably use a 1:2 container with buttons in the left column and an image component in the right column.

Or, you can try adjusting the padding on your container to give it a little more room on the top and bottom.

Or, try photoshopping the image to add some padding to the left and right (or top and bottom) of your image. I’m not sure which will work, but I think if you add padding on the left and right sides of your image, it will cause the top and bottom to squeeze a little bit, and should hopefully fit the entire logo part of the image inside the container.

THX for the tip @Jeff_Hager :slightly_smiling_face:

When you say padding, do you mean more white space around the logo, of can you actually build in padding into an image?

Chers Mans

1 Like

Depends on if you are asking about padding for the container or for the image.

The container should have a padding setting to adjust the top and bottom padding, so that can be done in the builder. Not sure if it will fix your issue or not.

But, if you are talking about padding the image, then yes, I meant to add white space to the image itself. There is no option to do that in glide, so you would have to do it with a photo editor.

OK, then I see what you mean.

I actually have max padding in Glide, but I will add some white space around the logo, but I guess that the logo will then also get smaller when viewed on mobile and tablet view.

Yes, unfortunately I think you are correct that the logo would get smaller. For that reason, I think a 1:2 container might be better, although the image won’t be centered…and now that I think of it, a 1:2 container might wrap and put the second column (image) under the first column (buttons) instead of side by side. It all depends on the screen size of the device.

It’s a bit of trial and error to find which layout works best. Sometimes I end up with a look that’s different from what I envisioned, but it ends up looking just as good, or I like it better.

Your app already has tabs that do the same thing, so the buttons seem redundant. I guess I would just get rid of the buttons, and then use an image component to display your image.

2 Likes

Hi again @Jeff_Hager

I just spent a couple of hours reading about CSS.

I could definitely solve this with custom CSS, but when I try it out, nothing happends.

After some fault location it seems like custom CSS is working just fine in Glide Apps, but not in Glide Pages.

Looking at the pricing tab, I can see that CSS for Pages is available in the Businessplan.
The feature is called “Pages CSS”

But is it not strange that CSS is working in every plan for the Apps but not for Pages.

Or does it take something else in pages than just adding the CSS code in the “Rich Text” component?

Actually found the answer myself…

1 Like

Using CSS in apps is not “officially” supported by glide, but they have been gracious enough to keep allowing its use. Because it’s not officially supported, using CSS in apps is at your own risk and subject to break at any time if glide makes major structural changes. All elements have styles applied, but when we apply CSS, we are forcing an override of that standard glide stylesheet. I use it myself, but very sparingly, and I always have a backup plan if it ever stops working for any reason. If I can avoid using it, I will.

Pages were built from the ground up and structured much differently from apps. For example, elements in Pages can dynamically change and reflow based on the dimensions your screen. This probably means different elements and different stylesheets based on screen size, and it’s much harder to write CSS that can dynamically adapt to those screen size and element changes. I think glide tried to lock some things down to protect people from themselves. They do officially support CSS is pages, but it under a more controlled environment where you assign your own class names, and then you have global CSS where can target the specific class names that you have assigned to each component. It’s a much different process compared to throwing a rich text component somewhere on your screen, and yes as you discovered it’s only available on business or above plans.

2 Likes