Responsive hero image bleeds to the right of the VP

Wappler General
#1

I am sure this is a very easy fix and its because I am a newbie to Wappler but I am having an issue with responsive associated with am full view port image. I have a feeling it is due to the use of the flex container div but the issue is that I want a responsive image as a landing for the website. I have applied these properties to the image;

I want a full vh set to the image but allow for the vw to be centered on the image and when I move from mobile to desktop the image does not responsively change in height. Now I have it set so it does that however the issue is that on mobile or screen size lower than 1400px there is the ability to swipe and move the screen to the right. See the attached images for reference.

Thanks for the help.!

Screen Shot 2022-12-08 at 10.27.42 PM

#2

I think that you are better off with a background image as shown in

#3

I tried this but the image would not show. I will try this approach again. But yes it must be a background image but set to a larger px height.

So I set the BG to the container. Does it work in the same way for a flex container? I am speaking to the properties of Wappler.

#4

Yes, any container.

#5

Question, I have used this technique on the hero landing and it worked. However I have set up a four column section, where I have a

section, the row, then column, then flex container.

I then want to apply the background image to the flex container. I do this and the image does not show…

Any insight as to why that is?

#6

Set the height of the container like 100vh orsimilar.

1 Like
#7

This post relates to video but the container issue and solution are the same.

1 Like