Changing responsiveness

[crazymikejr14]

Hello there, I am hoping you can help me with a solution to this problem.

So I have this on my page:
an ‘Image’ element & a ‘Classic Header’ element

This is what it looks like on mobile:

What I’d like is for the images and headers to go into 2 columns instead of 4(desktop), and instead of 1(current mobile/tablet)

And work around for this??

Thank you for your time!

[ruenel]

Hello Michael,

Thanks for posting in!

The image were perfectly circle in desktops screen. In smaller screens, it is not longer because of the change in the width or height. I would highly recommend that you upload a perfect square image so that you can create a perfect circle. I would also suggest that you add a custom class like round-image so that you can add this custom css:

.round-image {
  max-width: 250px;
  max-height: 250px;
}

This would make sure that your image will have the same width and height in all screen sizes. Regarding the columns, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

[crazymikejr14]

The images are perfect squares.

Thank you for the information, although that was not my question.
My question is how to change the responsiveness of the elements.

In current tablet/mobile view it is showing 1 image like so:

I would like it to be 2 images, like so:

Is there any way to force this outcome?

Thank you,
Michael

[christian]

Hey Michael,

Regretfully, there’s currently no option to change column numbers per screen size. The official setup is to create desktop, tablet and phone versions of a section and hide accordingly per screen size using the Hide During Breakpoints feature.

I’ll show you another setup but since it uses custom CSS, this will not be supported. Please watch the video below:

In the future, you more layout options might be possible. For more details, please check out our previous status report at https://theme.co/apex/forum/t/status-report-july-31-2018/39909

Hope that helps.