Cypress runner loading mobile site instead of desktop site

I am opening the website https://www.vangoghmuseum.nl/nl with cy.visit().

However, the cypress runner is opening the mobile website instead of the desktop website.

Any ideas why and how to change this behavior?

>Solution :

The mobile setting seem to be more like tablet size settings.

You can control the viewport before visiting

it('opens van gogh', () => {
  cy.viewport(1800,1000)
  cy.visit('https://www.vangoghmuseum.nl/nl');    // large screen layout
});

If you open devtools to the right and resize, you will see the breakpoint is around 1025 px wide.

Cypress viewport defaults to 1000 px, so you get the small-screen layout.

If you look at one of the <article> elements, it has breakpoint styling of

@media only screen and (min-width: 64em)

which equates to 1024px for the default pixel size of 16px.