Need a Tip: How to Handle Space With or Without an Image in Wix studio

[wix43684]

Hello, Wix expert.
I’m creating a website using Wix Studio Builder.
I’d like to ask for help with something.

As shown in the attached image, I want to adjust how space is used depending on whether or not an image is present.

Specifically, I want the title and description to take up the full width when there is no image, and only the remaining space when there is an image on the left.

Can anyone please share a tip on how I can achieve this?

[onemoretime]

Hi, @wix43684 !!

Is this a repeater? Hmm, well, the first method that comes to mind might be a bit primitive, but it could still be effective: using two text elements—one full-width for when there’s no image, and another with a reduced width for when there is an image. By showing the full-width text when no image is present and the smaller one when there is.

For now, rather than trying to control the width, shifting your approach to simply switching the display might be the key to solving the issue.

Good luck!

[wix43684]

I appreciate your great advice. If I can’t find another solution, I’ll definitely consider it. Thank you!

[Pratham]

You can do that using Advanced Sizing and a little bit of code.

I’ve listed down the steps below. It’s not that hard, and if followed correctly, you should achieve your desired effect.

1. Click on your repeater item. Then from the Inspector Panel, go down and turn on Apply Custom CSS Grid.
2. Then add another column - so now you should have two columns and one row in total. The left column will contain your text elements and the right column should be solely for the image. Make sure that your text and image are in their own respective columns only. They should not be overflowing into the next column.
3. Now click on your image and set it’s width in pixels or vw or anything except percentage. Once done, undock your image from the edges and align it to the centre & middle.
4. Now set your image column’s width to max-content.
5. On the left column, align / stack your text and give it a width in percentage, for eg: 90%. This is how your repeater item configuration should look like, in the editor:

Note that Item B does not have an image in the CMS collection, hence the default placeholder image is still shown when connected through a dataset. So we need to hide this placeholder image if the database does not have an image for the particular item. Only then will your text stretch full width. So in order to collapse the placeholder image, we will have to write a little bit of code.

6. To enable coding, simply Select your Repeater > Right Click > Add Code > Enable Coding> Start Coding. This should pull up a code panel at the bottom of your editor, and on the right side of the code panel, you will see the ID # of the repeater element under Properties.

7. Change it to #myRepeater. Then click on the image inside the repeater and change it’s ID to #myImage. Then from the CMS Connections panel at the right, click on Dataset Settings and change the Dataset ID to #myDataset.
8. Finally, inside the code panel, replace the default code with the one I have provided below:

$w.onReady(function () {

    var defaultImage = $w('#myImage').src;

    $w('#myDataset').onReady(() => {

        $w('#myRepeater').forEachItem(($item, itemData, index) => {
            if ($item('#myImage').src == defaultImage) {
                $item('#myImage').collapse();
            }
        });

    });

});

9. And lastly, make sure there are no red lines in your code, then Publish your site and check it out if it is working as expected. This is how the end result will look like:

[wix43684]

Dear Pratham,
Thank you for your kind and detailed message.
Your solution is precisely what I had been searching for so eagerly.
Thanks to your guidance, everything is now working perfectly.
Even the issue on mobile—where the empty space appeared when there was no image—has been completely resolved.
I’m truly grateful for your support.