Website scrolls to the left - Post ID...
When I test my RLM design on my smart phone (galaxy s3), it looks just as I expected it to. But I can grab the web site and scroll it to the left, about 20% of the screen. Which leaves a white space on the right and pushes the text off the screen to the left.
How can I fix this problem?
How can I fix this problem?
Check your layout visually within RLMP and make sure the Columns and/or Containers are not outside width of the Grid, that's usually the main culprit and you'll need to adjust margins and paddings until you get them inside the boundries so to speak.
I am not sure what I should look for? I have set the width to 12 divisions, where else should I be looking.
Use the selection drop down to choose your full grid, that will show you the boundaries (left and right) of your site structure. Note that visually. Now choose your Columns one by one (on the left and right side only) and note if you see that they are extending left and/or right beyond the boundary of your Grid.
You can more easily check this by selecting your grid and then scroll the page to the right or left (you'll be able to do this within the program as well as in your browser so the issue of the horizontal scroll was there before you exported it). Now mouse over the right/left side of your grid boundary. If you see any of the item outlines show up that look like they are going over that boundary of your grid then that's the row of elements you need to adjust. There may be more than one so rinse and repeat as needed. Keep in mind you'll need to do this for any unique pages that don't have the same classes and ID's as those you are adjusting, if they also have horizontal scrolling going on.
Keep in mind also that you may need to adjust more than just the item that is out of bounds in order to fix this. Sometimes you'll need to add/remove margin and/or padding from other elements in that row to accommodate the changes needed in the one that is going out of bounds in order to keep your uniform spacing that you wanted/had.
Adjusting a "Row" will not matter so don't bother with those, the culprits are usually Columns and Containers that are going over the edge, and sometimes a straight element itself will be over the edge.
You will need to play with your Margins and Padding (mostly margins) in order to work those items back within the Grid outline. It's ok if some of the items overlap the outlines of others, just make sure when you slide the slider that they don't do so when shrinking and you'll be fine.
Hope that helps.
You can more easily check this by selecting your grid and then scroll the page to the right or left (you'll be able to do this within the program as well as in your browser so the issue of the horizontal scroll was there before you exported it). Now mouse over the right/left side of your grid boundary. If you see any of the item outlines show up that look like they are going over that boundary of your grid then that's the row of elements you need to adjust. There may be more than one so rinse and repeat as needed. Keep in mind you'll need to do this for any unique pages that don't have the same classes and ID's as those you are adjusting, if they also have horizontal scrolling going on.
Keep in mind also that you may need to adjust more than just the item that is out of bounds in order to fix this. Sometimes you'll need to add/remove margin and/or padding from other elements in that row to accommodate the changes needed in the one that is going out of bounds in order to keep your uniform spacing that you wanted/had.
Adjusting a "Row" will not matter so don't bother with those, the culprits are usually Columns and Containers that are going over the edge, and sometimes a straight element itself will be over the edge.
You will need to play with your Margins and Padding (mostly margins) in order to work those items back within the Grid outline. It's ok if some of the items overlap the outlines of others, just make sure when you slide the slider that they don't do so when shrinking and you'll be fine.
Hope that helps.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.