So im having problems with my website, specifically on mobile when you load up the website on mobile it shows it like normal and how i think it should look on the left side of the screen, but on the right side of the screen it says “background image” or something like that now this doesnt make sense to me because on webflow i saw that right and i was able to fix it on webflow to where i dont see that, and it looks normal like how it should look on mobile but when i publish and check it, its still messed up, and i have confirmed with my peers that its on all phones, now another thing at the very top, my Nav bar also starts at the middle which is weird because my first like hero page i guess its like full but when you scroll down it has the like half working half not working thing like i explained earlier, but then i somehow figured out how to change the “background image” thing to a color but its still like half and half so, please help.
Let me help you with both the background images and navbar positioning.
For background images, you can adjust their placement in the background settings panel. While images default to the top-left corner, you can modify this by:
Adjusting the position settings to place the image where needed
Using the “Cover” option to scale the image to fill the entire background of the element
Regarding the navbar positioning, when placed inside another element, it automatically takes up the full width. To center your navbar:
Set a specific width value for the navbar itself, or
Adjust the width of the parent element and use auto margins to achieve center alignment
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
The mobile canvas extends to 479px, but your heading is extending past the canvas which is causing the display issues. Your heading also has left padding of 100px. Try removing the padding and reducing the size of your heading font so it fits within the canvas.
Hello I took your response into consideration, and I worked with chatgpt to help me and I got to a point where it fits the whole screen now, but you have to zoom out a little bit for it to fit the whole phone screen. What can I do to fix that.
Hello I took your response into consideration, and I worked with chatgpt to help me and I got to a point where it fits the whole screen now, but you have to zoom out a little bit for it to fit the whole phone screen. What can I do to fix that.
If you need to zoom out to see the entire phone layout, then something is extending unnecessarily beyond the canvas. Check your layout to see which elements are too large and reduce as necessary.
I see, and would could it be things such as the header like you said? Or what else could it be bc I did take the padding off the heading like you said.
Hi - The heading is improved but there are issues with some other elements which are causing display issues. Web design can be frustrating, but like most skills, the more you practice and learn - the more things will start to improve and make sense. Perhaps check out some of the tutorials on Webflow’s Youtube channel to help get you started - the Box Model intro might be a good place to begin.
