What are the strategies employed by Wix in utilizing mobile and desktop CSS?

While browsing through Wix, I stumbled upon something quite intriguing that left me puzzled.

On a desktop with a width of 2560px, the Wix page loaded normally. But what caught my attention was when I resized the screen to make it smaller, either by using inspect mode and setting the width to 320px or by manually adjusting my browser window size - the CSS didn't switch to mobile automatically. It only made the change once I refreshed the page.

The interesting part is that this behavior works both ways. After refreshing the page and returning to desktop mode (width 2560px), the mobile CSS would still be in effect until another refresh was done.

This kind of magic is new to me and I'm curious to learn how it functions and how it can be utilized effectively.

On a side note, I wonder if this feature has any impact on SEO and page load speed optimization?

Answer №1

In traditional websites (excluding Editorx), Wix dynamically calculates the CSS on the server based on the user's device. Adjusting the resolution does not alter the server's initial response, which is why a page update is required to see changes.

It is important to note that even when resizing the window while visiting wix.com, the desktop version is still displayed. Only by simulating a mobile device will you be able to access the mobile layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent ...

Is there a way to adjust the color of the checkbox?

After creating a show/hide toggle checkbox for a password input, I ran into an issue with changing the background color when it is checked. Our current code base includes a custom styled checkbox, but it lacks the ng-model needed for this particular featur ...

The CSS attribute selector is unable to target dynamically appended class names

Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...

The page's dimensions exceed the size of the device screen

I created this basic HTML content using React <!doctype html> <html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style>< ...

I am looking to include both the type and maxLength attributes in a MUI TextField

<TextField value={ele.mobile} helperText={ferrors[id]?.mobile} name="mobile" classes={{ root: classes.textField }} InputProps={{ clas ...

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

My div is packed with content, including a chart from amCharts and multiple sliders from noUiSlider. It also features various AngularJS functionalities. To hide the page quickly, I use $('#container').addClass('hidden'), where the rule ...

The use of htmltools::tags$iframe in Shiny to display an HTML file is not functioning properly when combined with renderUI()

Hello everyone, this is my first question on StackOverflow. I hope you can help me out even though my question may not be in the correct format. I have an HTML widget that was created using flowmapblue.R and saved as a file that I want to display in a Mar ...

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

Display animated GIFs in the popular 9Gag format

Is there a way to display a GIF file after clicking on a JPG file, similar to the functionality on 9Gag.com? I am currently using timthumb.php for displaying JPG images. https://code.google.com/p/timthumb/ Below is the code snippet: <div class="imag ...

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

I am trying to enhance this image slider in HTML and CSS to achieve the following objectives: 1. Eliminate the scroll bar 2. Implement swipe functionality with mouse flick (should work on mobile devices as well) 3. Make the images clickable .slider{ ove ...

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

The controls for the HTML audio component are missing the download option on Safari

In my React application, I've declared an audio component with controls like the following: <audio controls> <source src={url} /> </audio> While this setup works perfectly in most browsers, it seems to have a bug when used in Safa ...

The ng-model remains unchanged when the <select> element is modified using JavaScript

I am currently working on creating a customized dropdown box with the help of JavaScript and anglersJS to connect the data with the select element. The user interaction involves clicking on a div element that is styled to act as the dropdown option. This d ...

Swapping out images by clicking on a thumbnail, featuring numerous occurrences on a single webpage

I'm currently working on a project where I need to display several large images with corresponding thumbnails. When a user clicks on a thumbnail, I want the larger version of that thumbnail to replace the current large image. While I have successfull ...

How can I restrict the selection of only one checkbox within an iframe window?

Here is my JavaScript snippet: var iframe = document.getElementById('pltc'); iframe.contentWindow.document.open('text/htmlreplace'); iframe.contentWindow.document.write('<input type="checkbox" name="tc0">Yes<input type="c ...

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

Extracting data from a JQGrid in HTML5 Builder: a beginner's guide

Apologies for asking this question as I couldn't find any relevant posts addressing it specifically in relation to HTML5 builder. I am trying to retrieve the value of the "ID" column, which happens to be the last column among the four, based on the r ...

Step-by-step guide on incorporating Google Fonts and Material Icons into Vue 3 custom web components

While developing custom web components with Vue 3 for use in various web applications, I encountered an issue related to importing fonts and Google material icons due to the shadow-root. Currently, my workaround involves adding the stylesheet link tag to t ...

Is there a way to disregard the active region of a child element while the parent is active?

Currently, I am working on building a to-do list application using React. In the CSS styling, I have implemented an animation for when an li element is active, causing it to expand in height. The issue arises from the fact that I have also set up an onClic ...

Learn how to align elements in the Toolbar component using the package "@mui/material" version "^5.11.3"

Recently, I came across this example on their website: https://codesandbox.io/s/0f50jf?file=/demo.js I've been attempting to align all toolbar elements in the center using: sx= {{ justifyContent: 'center', alignItems: 'center&apo ...