Custom Code to control Break points in Wix Editor /CSS

Ask the community
, , ,
1

I am only able to use Wix Editor due to constraints of needing the single page architecture .
I CANNOT use Studio for my site.

If /when we upgrade would we be able to then add custom CSS to the head/body etc using the Settings / Custom code area

{337B7D52-4D31-486C-B47C-6572502DC63A}
{337B7D52-4D31-486C-B47C-6572502DC63A}957Ă—694 22.8 KB

Product:
Wix Editor

What are you trying to achieve:
I am trying to find a way to control break points in Wix Editor. And hopefully when or if we do upgrade will will be able to ad media Queries here to control page width for IPad/Smart devices.

At present we have to load the Desktop site to an iPad or we get a big white border on the right hand side of the page (not part of the page) Which I think is due to the Mobile break points using some sort of fit height!???.

Desktop view

{D8893144-7EC7-41B6-ADB9-3B4E999A2806}
{D8893144-7EC7-41B6-ADB9-3B4E999A2806}1396Ă—929 147 KB

Mobile view

{33AFA2D4-3BB4-4C2B-99EA-00D2FC6D7BF5}
{33AFA2D4-3BB4-4C2B-99EA-00D2FC6D7BF5}318Ă—539 76.3 KB

iPad/Smart Device ( using mobile view by defualt)

{77B4B44E-4EFE-4406-8465-97415D4A7726}
{77B4B44E-4EFE-4406-8465-97415D4A7726}779Ă—840 90.6 KB

2

It sounds like you’re facing issues with responsive design and breakpoints in Wix Editor. Just so you know, this is something that can be handled in Wix Studio. No CSS necessary. You need the right measurements used on each element. A combination of Viewport height / Viewport Width (VH / VW) or percentage measurements in the right places will resolve any responsive issues. And you can absolutely stick with single page architecture in Studio. It might even be easier in studio than it is in the older editors.

3

You have to use strips and columns to create adaptive elements (not responsive).

It is not possible to control “responsiveness” on the classic editor even after upgrading.

By the looks of it, you have not turn on mobile view on your site. Your screenshots show the desktop version only.

5

I think you missed the bit were I say I cannot use Studio.

@codequeen means upgrade from free to paid. Not from Editor to Studio.

I do have the Mobile running. The grabs were just done from the browsers responsive mode.

I will look at strips. and report back.
Thanks

1 Like
7

Hopefully not to side track too far; my understanding is below.

Wix Editor (Single-Page Architecture):

  • Single-Page Application (SPA): In the Wix Editor, the site is structured as an SPA, which means all content is loaded once initially and then dynamically displayed based on user interaction.

Wix Studio (Multi-Page Architecture):

  • Multi-Page Application (MPA): Wix Studio follows an MPA model, where each page is loaded independently. This is useful for larger sites with complex structures.

  • Full-Page Reloads: Since each page loads separately, it may have slight loading times when navigating. However, this setup allows for distinct page URLs and specific optimizations for SEO and analytics tracking.

Because of the Full-Page Reloads. We cannot use studio.

8

You know you are right.

I just realised that for some reason when the iPad loads the desktop view but with the odd whit space shown above.
If I go to request option it gives me the Desktop not the mobile. Choosing desktop, it loads filling the view.
I can go back to the request option again and I now get mobile. selecting that loads again the desktop view! but with the space on the right again.

Very odd.

The Mobile version load ok on an actual mobile.

Here are two of my test sites.
Without Strips.

With strips ( only on home page for now)

Mobile view on phone.

IMG_5750
IMG_5750828Ă—1792 277 KB

9

If that white space still exists then there is possibly an oversized element somewhere on the page.

10

That’s what I thought. And I have checked and cannot see an oversized element.

But the issue seems that the pages loads the a mini desktop type view with the space on the right and thinks it’s the Mobile one on the iPad?.

the iPad is never loading the mobile view it seems.

The other issue is loading the desktop one through the request option works to load the desktop view but is then has a lot of space outside the view… so when you drag for example carousel at the top to spine the DJS around to the one you want., the whole page moves making it impossible.

I also just removed all my elements from the page and it still does not fit to the view on the iPad.

IMG_0437.PNG
IMG_0437.PNG1640Ă—2360 107 KB

11

@codequeen ,

I have still not solved this, but what I did discover is if I inspect the page on the iPad’s browser and insert this css. It fixes the issue.

body, html {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

So my question is , if I had access to this.

Screenshot 2024-12-17 at 23.11.46
Screenshot 2024-12-17 at 23.11.462286Ă—1956 285 KB

Then would I be bale to put css in there that takes affect on the page.

12

Use the layers panel. There could be an element that accidentally floated away.

I don’t know if the custom code settings in the dashboard area will help.

13

Can’t see anything out of place.

Very frustrating. I honestly do not know why Wix can give studio easy access to css and not do something so basic for the Classic.

14

Would you like me to take a quick peek in the editor for you?

You can add me as a contributor. Just let me know what page to look at.

15

Thanks.
I have jumped over to support to see if they can help, with this.
Sent them some video etc

16

Support not much help on this.

But I just noticed the pages have started to load correctly on the iPad without the space issues.

Both on the test sites with and without the strip changes.

My iPad version is still do same, so I think it was an issue with the Wix servers. !?
It also confirms, as I was not 100%, I was not misremembering that I did not have this issue before on the iPad.