In need of help: page messed up onmobile

Dear all,

As a total idiot on coding or building websites whatsoever i hoped Squarespace, as stated in all the advertisings, would be simple to use, even for me.

I'm afraid i expected to much and i'm not happy with how my site is shown on tablets, like the iPad i have.
I have made a full website with the comfort of my PC. I'm happy there so whats more to like i can here you say. Well, as soon as i proudly let someone see my site on the tablet, like an iPad, my hard work seems to have vanished.

To solve this issue i need help, since i do not understand the how and why. Squarespace gives the oppertunity to hire an expert so i went that way. That road  is however a dead end also, since from 99designs i can hire someone for thousends of dollars. Duhh..

So i end up here hopefully to find someone to resque me. Help would be really appreciated in any form.

I attach 2 files to showcase my problem so far:

1 screenshot from PC (colours are of in the screenshot) 4 colums, beautifull aligned, everything in order.

Another screenshot, same page from iPad. Colums are set on 2 pages, alignement is a mess. In all it looks cheap and not at all professional.

Is someone willing and able to solve this for me. Please reach out so we can discuss terms and possibility's 

Thank you very much upfront,

Regards Mart Stevens

Hi,

What is site url? We can check easier

Understandable. Sorry. http://www.martstevens.com

On 2/17/2023 at 4:29 PM, Broosha said:

Understandable. Sorry. http://www.martstevens.com

Hi. Choose this option

This is really superb Tuanphan. Amazing, thx. Problem 1 seems to be solved indeed.

Do you also know if it's possible to keep the 4 items in 1 row. On PC screen they are nicely aligned, but on a tablet the 4th item is placed on a second row. Or do you think the tekst will get to small then to read?

So far you are my hero.

On 2/21/2023 at 8:45 PM, Broosha said:

This is really superb Tuanphan. Amazing, thx. Problem 1 seems to be solved indeed.

Do you also know if it's possible to keep the 4 items in 1 row. On PC screen they are nicely aligned, but on a tablet the 4th item is placed on a second row. Or do you think the tekst will get to small then to read?

So far you are my hero.

Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:1024px) and (min-width:768px) {
.user-items-list-item-container[data-section-id="625ae728ce43721fdfb369f2"] {
    grid-template-columns: repeat(4,1fr) !important;
}
}

I'm afraid you're overestimating me now 🙂 

Is this what you ment? Probably not since the way i copy/paste that line nothing happens (as far as i can see)

That code for Tablet. Have you checked tablet yet?

yes sir, i did.

I copy/pasted your code into: DESIGN -> CUSTOM CSS.

I did that on my PC. When opening the site on the iPad, nothing has changed; still 2 rows
 

12 hours ago, Broosha said:

yes sir, i did.

I copy/pasted your code into: DESIGN -> CUSTOM CSS.

I did that on my PC. When opening the site on the iPad, nothing has changed; still 2 rows
 

It looks fine to me

??

That's odd. This is what i see (image taken 27/2/2023 10:05

This is working!!!!!!!!

Many many thx tuanphan 

I would never have been able to solve this myself. Really superb. I'm happy now.
 

Mind just 1 question: this code i got from you, will that be removed when Squarespace updates the templates or so? In other words, do i need to re-copy/paste it sometimes and be alert on that?

Again so much thx. Awesome

On 3/13/2023 at 7:00 PM, Broosha said:

This is working!!!!!!!!

Many many thx tuanphan 

I would never have been able to solve this myself. Really superb. I'm happy now.
 

Mind just 1 question: this code i got from you, will that be removed when Squarespace updates the templates or so? In other words, do i need to re-copy/paste it sometimes and be alert on that?

Again so much thx. Awesome

 

It only changes if you delete the current List Section and insert a new List