Home>Support>Scaling down images inside a row vs. collapsing vertically

Scaling down images inside a row vs. collapsing vertically

Hello!

My site is www.DanielDiNicola.com – it’s a lifestyle blog sort of website. I’m a novice in terms of web design, so please excuse my ignorance!

I’m trying to create a uniform experience for all my pages, and that basically includes a banner at the top, and then a few square images (3-6 images) below the banner.

When I create row of images using PageBuilder, it appears as if all my images are fitting in the same row, and it shows what percent they are being scaled at.

The problem I’m noticing is when I’m using mobile, or when I make the browser window smaller on the computer…the images do not seem to scale, but rather they collapse vertically. (?!)

I use the RESPONSIVE theme, and I do want my website to be responsive…BUT I would rather these square images/links be SHRUNK instead of aligned vertically.

I’ve tried changing the image sizes and that doesn’t work…it just creates a big gap between the images.

See examples here:

Health Club

Kitchen

Thank you for any help you can provide!!
:D

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 5 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Daniel,

    You can disable the responsive collapse on rows by adjusting the Collapse Behaviour setting. Please open a row you would like to do this for by clicking the wrench icon above the row. Once opened, head over to the row styles sidebar and open the Layout settings group. Set the Collapse Behaviour to No Collapse and then save. How does that look?

  2. 5 years, 8 months ago Daniel DiNicola

    Hi, Alex!

    Thanks for responding so quickly!

    I tried that too, and it seems to work for the most part as far as scaling…however, when I open this page on my iPad, it looks like the squares are running out of bounds (off the white, into the gray).

    Can you see what I mean in the attached image?

    This is how it looks on my iPad https://www.danieldinicola.com/health-club/kitchen/

    How can I get the squares to scale without collapsing OR going out of bounds?

    Thanks again!
    :D

  3. 5 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Daniel,

    It appears as though your theme may not play well with the flex layout. Can you please navigate to WP AdminSettingsPage Builder and open the Layout settings group. Set the Use Legacy Layout Engine to Always and save. Does that help?

    Can you see what I mean in the attached image?

    Unfortunately, we’re unable to procress attachments at this time. You’ll need to upload the image to a third party image hosting site like Imgur or vgy.me. With that said, I was able to replicate this issue so I don’t worry about re-sending the image – it’s all good.

  4. 5 years, 8 months ago Daniel DiNicola

    Hmmm….

    No, that did not work, it just made all the squares go back to collapsing…

    If it’s the theme that’s the problem, can you recommend a different theme that would enable me to do what I’m trying to do?

    This is the theme that I started with years ago. I am open to changing (something free) if that would solve the problem!

    Thanks again!
    :D

  5. 5 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Daniel,

    That’s odd. Maybe it’s not the theme – please revert the setting change.
    Would it be possible for you to send me an export for the linked page? To do this please open up the linked page in the editor and click the Layout button in the Page Builder toolbar. Then click import/export and then click download. Please upload the export to a 3rd party file hosting site such as WeTransfer (no email is required).

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More