Responsive issues with demo airi site on 'Our Work' section?

Airi
#1

Hi there. I have the airi installed on my wordpress website and I noticed some weird things with it. I noticed an issue when it comes to the responsiveness of the website and it seems to affect the demo site as well as mine. In the second ‘Our Work’ section of the demo, when I shrink the browser size (to simulate tablet size and mobile size) this section gets scrunched together and is really messy. See pic below:

airidemo1
airidemo1.JPG770×653 54.6 KB

I noticed when the resolution is really small (mobile size), the ‘Our Work’ section of the demo seems to self-correct (by not displaying the laptop image at all), but on my website the issue remains because the laptop picture remains behind the bar chart. See pics below:

Demo Site (mobile size):

** Image removed due to new user profile **

My Site (mobile size):

** Image removed due to new user profile **

Any ideas on why this is happening and how it can be fixed?

Thanks for your help.

#2

Hello,

It’s a demo content issue, thank you for pointing it out (I have already reported it). That laptop image is the row background, so you can try to change that image or put it in the right section of that row. Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

#3

Hello Roman. How would just swapping the image for another image fix the way the responsive structure displays it? Also, can you show me with a screenshot how I can try your second idea (putting the image in the right section of the row)? Thanks.

#4

Hello,

How would just swapping the image for another image fix the way the responsive structure displays it?

You can use texture background image that will not blend with content.

Also, can you show me with a screenshot how I can try your second idea (putting the image in the right section of the row)?

I think that it’s better to describe. Basically you have a full-width container with laptop image background, it contains two half-width sections. Right section is empty, so you can use Image widget there to properly insert the laptop image.

Let me know if you need more help.

Kind Regards, Roman.

#5

Thanks Roman. I think I am going to delete the image from the full-width container and add an image widget to the empty right section as you described.

#6

Okay, you are welcome!

Kind Regards, Roman.

#7