Can't get mobile to look correct


#1

I'm having issues getting supporting-1, 2, 3 and 4 of my Bass project to format properly in when the screen is shrunken down. The images don't resize and the text bleeds to the right. I've been trying different things but just can't figure it out. I've looked hard for typos and other errors, misplaced brackets, etc, but can't find anything (thought that doesn't mean they aren't there). Can some one take a look to see what I'm missing please?

You'll see a bunch of commented out code where I've been trying different things.



#2

start by reading the bootstrap - css page, explains the use of col-xs and col-sm which work for small screens and middle screens. col-md is only for large screens (wider then 992px)


#3

Thanks. The odd thing is that I sneak a peak at the source code of the example project pages sometimes to compare my code to theirs and they used col-md, and if you shrink down the page it looks great in their examples. This wouldn't be the first time that they did something in a different way that I couldn't reproduce.

view-source:https://s3.amazonaws.com/codecademy-content/projects/bass/index.html

I'll check out the page you referenced. thanks again.


#4

apart from colors, i don't see any major differences between the two?


#5

Yeah, I had quite different code before. Most is still there but commented out because I started using their code slowly, saving each time I made a change to see if I got a different result. By the time I switched just about everything out I still didn't see a difference. There was another project where I did the same thing and their code didn't fix the issue but that time I found a solution on my own.


#6

My carelessness strikes again. In the CSS for .container, I had "width: 1000px;" instead of "max-width: 1000px;".


#7

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