I have a landing page that looks fine on my desktop browser but when I go to it on a mobile browser there was a line showing up (between the left column and body) down the left side of my page from where the header ends all the way down the page to where the footer starts. I changed the margin of the left column div from like 1px to 2px and the line is gone. My problem is that there is still a horizontal line from where the top of the left column starts (between where the header ends and left column starts) that extends to the left side of the page (but only in a mobile browser). My body and left column background colors are white so the line is thin but visible. Can anyone tell me why this is happening? I wrote the code in notepad++ and I'm fairly new to html and css but I've poured through the code and cant figure out how to fix it. It was a major pain re ftp'ing the html file to my host server and refreshing my mobile browser every time and I still couldn't solve the problem. My html and css are in the same file. Pleezz Help!!!...
Well, we'll have to wait a few days so you can post a URL as we can't help you without seeing the page or code in question -- however did you actually design FOR mobile using responsive layout, or are you simply crossing your fingers and hoping to JHVH that your layout designed for desktop/laptop resolution screens miraculously works on a device with a fraction the width? If the latter - of course it renders different. You say you're fairly new to this, that probably means you didn't build with fluid layout, haven't learned responsive design yet, and have not been introduced to the joys of building cross platform design. It is entirely likely you've been led down the garden path by photoshop jockeys and their kine, who put the cart before the horse drawing pretty pictures of fixed width layouts that are nothing but accessibility train wrecks that NEVER work right on any mobile device, and to be frank aren't all that useful on larger screen machines either.
So is there a suggestion in there somewhere? Sounded like you were talking about something else personal?!...?
lol. dont take that lol offensively, Daman8trx. i know how you feel. i had the same problem on my website until i learned about responsive web design myself. i am not completely sure why it shows the line down the left side, my site was exacly the same. however once i changed it to a responsive design bam fixed. a quick bit about responsive design: it allows you to create a site that is accessible in both mobile and desktop/laptop platforms. it shows a different layout on each devices using media queries to say 'if device browser is this width change layout to this etc etc'. its an excellent thing to look into. as far as how to fix it otherwise i, i never fixed it until i changed my site =\
So does this mean I have to redo the entire html/css layout or is there code I can add to my existing layout? Am I allowed to post my style sheet for additional assistance?
well that really depends. how much did you utilize css? i hope, if you did use css, you set it in its own .css file. if everything is dependent on your css file then it should be relatively easy. however if the majority of your site does not rely on css that much then you are going to have to redo it. if your new to it as well as html it may take a day or so to wrap your head around how it all works. i suggest looking up articles on the responsive web design theories to fully understand what it does and also responsive web design tutorials. but i am more than happy to help explain a lot of it if you wish.