Jump to content

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

Recommended Posts

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

Screen Shot 2021-10-13 at 9.58.21 PM.png

Screen Shot 2021-10-13 at 9.59.25 PM.png

Edited by Ciodensky
added tags and rephrased title
Link to comment
  • Ciodensky changed the title to Reposition an image block on the top row of another image on mobile phones
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

Screen Shot 2021-10-13 at 9.58.21 PM.png

Screen Shot 2021-10-13 at 9.59.25 PM.png

Kindly share your protected password to check the issue together

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.