How can I change an image when webpage is below a certain width?

Ask the community
,
1

Hi guys,

I’m a little rusty when it comes to coding, and wanted to ask you wonderful people if you could help me find the best way to do something on my website?
I’m wanting to change my logo to a different/more minimal logo when the webpage width is a specific size or lower.

Webpage is linked for reference: www.kurious-katie.co.uk

2

You can use the getBoundingRect window property.

3

Thank you for your response Yisrael - how would I use the getBoundingRect window property to do this?

4

Use the width property to determine the width of the window. Depending on the width, you can choose the appropriate image.

wixWindow.getBoundingRect()
  .then( (windowSizeInfo) => {
    let windowWidth = windowSizeInfo.window.width;
    // use windowWidth to choose the appropriate image to use
  } );
5

So where would I put the images within that code? And which parts would I replace with the page widths?

6

The getBoundingRect() function lets you determine the screen width. You can call it from the page’s onReady() function, or from the site code onReady() to change the logo. You can set the image in the code where the comment “use windowWidth to …” is.