Streaming live at 10am (PST)

My website content is not fitting on Mobile Screens


#1

Hey guys,

I'm new to Webflow, and i'm having an issue with my website creating a horizontal scroll as if the content is going off the page in mobile view. Also my content paragraphs are not responding to the view port as if the width was smaller because of the added white space. I'm pretty sure i have everything with width of auto or 100%. This is my first time doing a 2 column design in Webflow, but i can't seem to figure this out. So far I've tried simply removing the elements by displaying them as 'none' to see if that could explain to me why it's happening, but even with the elements removed the site still responds as if there are elements floating to the right. Could someone take a look at this?


Here is my public share link: LINK
(how to access public share link)


#2

Hello @Darius_Shojaei, can you please share a public share link. This will help us in resolving your problem much quicker. Thanks! :wink:

http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/2573


#3

Hi @Darius_Shojaei,

Remarkable job so far especially for a first attempt at a complex layout! You are only about two clicks away :grinning: Looking at the code on your published site I can see that the item classed:

.services-body-container
width: 1100px;

is using a fixed pixel width. If you want to use your own custom column width it is simple to set up:

width: 100%
max-width: 1100px

this will allow your site content to fluidly scale to fit the available space (100%) and also be constrained to the max-width limit (1100px).

That sorts everything out as far as I can see when testing the published site and will allow it to scale for each device. :smile:

We can offer more detailed assistance if you share your public share link as @VLADinSACRAMENTO pointed out.

Let me know if that sorts it out - Rob


#4

Sorry for the late reply! Was working all day. How can i do a public share link?


#5

https://help.webflow.com/article/how-do-i-share-my-sites-read-only-link


#6

Thank you. https://preview.webflow.com/preview/dariuss-first-site-6d94da?preview=5fabc71f535b4ffcb802e47a99804f85


#7

Oh! I forgot that i ever did that. Thanks for the pro tip. Also thank you for the compliment. It's my first Webflow site, and i learned a lot making it. Excited to make the next one after all i learned.


#8

Hi @Darius_Shojaei,

You are very welcome. Thanks for the link! It looks like you will need to make the following changes for your site to be responsive and then we can test and diagnose further.

Select this page:

From the Navigator Tab select this item:

Change the settings for width and max-width as shown:

This handicap symbol / icon is causing the overflow issue and triggering the horizontal scroll.


If you need it in the interaction or visible on the site then you will need to set the overflow on the parent to hidden and it will mask it out in those situations. I am not sure how to maintain alignment of those objects if you set the map to scale??

Fixing the column will resolve the issues for every page and device and allow your site to properly scale. Please make those changes and mask the map container. Republish so we can test on mobile to see if it resolves the issue. :smiley:


#9

Thanks Vlogic. I will test this out tonight, and see if it works for me. I will keep you updated!

Also if you don't mind what would be your advice for full page images like i have as the "Hero Image" at the top of the site, and also my Map? Right now it's scaling with the page, but the scaling is not exactly how i would like it. Do you know any good practices on how to control my full screen images better when it comes to responsive design? I work on my site from a 30 inch 2k monitor so i always have to size my screen down based off what my users would probably actually use.


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.