Issue with Relume Layout Component: Images Shrinking Randomly | Relume Community

Issue with Relume Layout Component: Images Shrinking Randomly

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.

10 comments

Joaquin C.
·
Try giving them a fixed width/height - that happens when they are in %
🙌1
Markus M.
·
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! 🙏
🫡1
Emily M.
·
Does giving them a fixed width and height not affect responsiveness?
🙏1
Matt J.
·
Markus M. Yeah, I wouldn't do a fixed width/height. Emily M. 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!
🙏1
Markus M.
·
Thanks a lot to everyone who responded! 🙏 Matt J. 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? :)
Matt J.
·
Markus M. what browser? Can you record it happening - no sound is fine.
Matt J.
·
Ah nvm, I re-read your main sentence again, I see the published URL now - will take a look here, very interesting.
Matt J.
·
Markus M. 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.
🙏1
❤️1
Markus M.
·
Matt J. Thank you very much Matt! That fixed it!
Pawel T.
·
So good I found these comments! That works indeed!