Jump to content

2 column wide simple list on mobile?

Go to solution Solved by Web_Solutions,

Recommended Posts

Hey all! Im mostly new to coding, but i could NOT for the life of me find any built in interface to accomplish what i desire. I have my product categories laid out in a simple list, and on the desktop version ive mostly gotten them to look how i want, but the mobile format is atrocious. Seeing as 90% of my traffic will likely be on mobile I wish to make it more like the other screenshot ive supplied, with smaller icons, in a 2 wide format as i believe its MUCH easier to navigate.

Screenshot 2023-08-24 150847.png

MicrosoftTeams-image (2).png

Link to comment
  • Replies 7
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

9 minutes ago, ohitsthatkid said:

Hey all! Im mostly new to coding, but i could NOT for the life of me find any built in interface to accomplish what i desire. I have my product categories laid out in a simple list, and on the desktop version ive mostly gotten them to look how i want, but the mobile format is atrocious. Seeing as 90% of my traffic will likely be on mobile I wish to make it more like the other screenshot ive supplied, with smaller icons, in a 2 wide format as i believe its MUCH easier to navigate.

Screenshot 2023-08-24 150847.png

MicrosoftTeams-image (2).png

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
5 minutes ago, ohitsthatkid said:

d'oh. its heytherehero.co
PW is pleasehelpme

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
  [data-section-id="64e4e80d14ce66507c0ed3a3"] .user-items-list-item-container {
    grid-template-columns: repeat(2,1fr) !important;
    .list-item-content__button {
      padding: 10px 20px !important;
      font-size: 14px !important;
    }
  }
}

 

Screenshot_160.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 minute ago, Web_Solutions said:

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
  [data-section-id="64e4e80d14ce66507c0ed3a3"] .user-items-list-item-container {
    grid-template-columns: repeat(2,1fr) !important;
    .list-item-content__button {
      padding: 10px 20px !important;
      font-size: 14px !important;
    }
  }
}

 

Screenshot_160.png

Ah! Thatll do it, Thank you so much!

Link to comment
  • 3 weeks later...
On 8/24/2023 at 3:44 PM, Web_Solutions said:

You're welcome!

coming back to this, is there a way to make this universal across category  and item lists throughout the site on mobile? Like if i click into New Items, id like it to display 2 items side by side instead of one tall one (exactly like the front page categories you helped with earlier)

Link to comment
23 hours ago, ohitsthatkid said:

coming back to this, is there a way to make this universal across category  and item lists throughout the site on mobile? Like if i click into New Items, id like it to display 2 items side by side instead of one tall one (exactly like the front page categories you helped with earlier)

I think you have done this.

Screenshot_175.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.