Relume
Log in

Community forum for knowledge and support

Updated 6 months ago

Relume Layout Component 497 & 498 Image Resizing Issue

At a glance

A community member is experiencing an issue with the Relume layout components 497 and 498, where the images in the tab pane randomly get smaller, both in the designer and when published. Other community members suggest trying a fixed width and height, but this may affect responsiveness. The issue is likely due to the wrapper or parent divs not providing a proper container for the images, and the community member is advised to check their global utility classes and ensure they are using the Webflow Class Sync feature. The community member has cloned the Relume Style Guide and copied layout 498, but the issue persists. After further investigation, the issue is found to be caused by the tab pane settings, and the solution is to change the flexbox settings from "shrink if possible" to "grow if possible".

MMarkus Müller
·

Hello everyone 👋

I’m having an annoying issue with the Relume layout component 497 & 498.

The images in the tab pane just randomly get smaller; it happens in the designer and when published too. Is this a known issue, and does anyone have an idea on how to fix it? I would appreciate any insights or hints at what it could be. Here is the read-only link.

1
J
M
E
9 comments
JJoaquin Cahiza

Try giving them a fixed width/height - that happens when they are in %

MMarkus Müller

Agh! I’ve tried using auto and various other sizing options, and I’ve checked numerous settings. However, I hadn’t set it to a fixed width and height. It seems to be working now! Thank you so much! 🙏

EEmily Marais

Does giving them a fixed width and height not affect responsiveness?

MMatt Johnson

Yeah, I wouldn't do a fixed width/height. is 100% correct, it'll have adverse effects on responsiveness. This usually happens because the wrapper or parent divs are not providing a container for the image.

There are several issues with this section and with the site as a whole.

  1. Make sure you are using Class Sync
  2. It looks like you have heavily modified global utility classes and their styles and this is actually the main reason this section is not working properly. padding-global, container-large, and padding-section are all modified or duplicated. I would ensure you have our chrome extension installed and class sync on and copy in a fresh section and compare the settings of all of it.

There were a few other issues but I would take a look at our Resources site - there are a couple of docs on Client-First and what not and get familiar with those and you should easily avoid these issues in the future!

MMarkus Müller

Thanks a lot to everyone who responded! 🙏

Thanks to you for your extensive & helpful reply! Much appreciated! You’re right, its all a bit of a mess right now and I am looking into Client-First docs at the moment to learn more about it in general.

However, as a test, I have cloned the Relume Style Guide into a new project, copied layout 498 into the project, only added 3 images and changed nothing else, but the issue with the images being smaller (when published) still exists, in Chrome and Safari. See attached screenshots and the read-only link here. The published version can be found here.

Any idea what is causing this? What have I missed? :)

MMatt Johnson

what browser? Can you record it happening - no sound is fine.

MMatt Johnson

Ah nvm, I re-read your main sentence again, I see the published URL now - will take a look here, very interesting.

MMatt Johnson

after quite a bit of messing around, I discovered that its the tab pane that was causing the issues - just need to change it from shrink if possible, to grow if possible setting in the flexbox settings and you should be good. Apologies for this issue - I'll raise this issue with the team.

MMarkus Müller

Thank you very much Matt! That fixed it!

Add a reply
Sign up and join the conversation on Slack