Reposition an image block on the top row of another image on mobile phones

Site URL: https://www.xystema.com/

Hello,

I have a partner logo section and on the desktop it is in one row but on the mobile phone the entire row is aligned in one column.

What I want is to create 2 or 3 columns instead. How would I do that?

I have attached here screenshot of my actual case and my desire one.

I will appreciate any help.

Ciodensky

39 minutes ago, Ciodensky said:

Site URL: https://www.xystema.com/

Hello,

I have a partner logo section and on the desktop it is in one row but on the mobile phone the entire row is aligned in one column.

What I want is to create 2 or 3 columns instead. How would I do that?

I have attached here screenshot of my actual case and my desire one.

I will appreciate any help.

Ciodensky

Kindly share your protected password to check the issue together

Hi Bangank36, the password is 0612. Sorry forgot to share in the first place. Thanks in advance.

On 9/12/2020 at 10:34 PM, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
  }
</style>

 

I think I sent code for this question, in another post or email???

Hi Bangank36,

Any chance you can help me with this. I have search all over internet but no avail. I think I might need coding experience for this one to be able to customize to my like.

My website is https://www.xystema.com/ password 0612.

I will appreciate any help on this.

Thank you,

Ciodensky

On 10/14/2021 at 1:54 PM, Ciodensky said:

Hi Bangank36, the password is 0612. Sorry forgot to share in the first place. Thanks in advance.

Add to Design > Custom CSS

/* Mobile Logos */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1634259163197_28878+.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1634259163197_28878+.row .span-4 .span-2 {
    width: 50% !important;
    float: left !important;
}
}