Hello campers,
I’m having issues with my layout not rendering as I’d hope on smaller screens. Im working on the tribute page project, and this is my second attempt to improve from the first version. I tested on my computer and everything looks good, that is until I make the screen smaller. I am using the Bootstrap container-fluid class on my div elements. I’m also using the row and col-md-x classes to display content in a grid. Maybe I’m nesting my elements incorrectly? I’m going based off the Responsive Design with Bootstrap lectures. Any tips are greatly appreciated or any guides that can help me learn more about layout design as well.
Thank you all…
Version 1.0
and
Version 1.1
Hello, div class="fluid-container" should be div class="container-fluid"
I don’t think you should nest divs with the container classes.
You could also try simply div class="container" , I know the container-fluid sometimes messes with other elements (but I can’t remember which).
The difficulty you’re having with your fixed element is the same I’ve had… I fiddled some half-solution - not great but it might be a start for you to improve>
You can see it here (you just have to click on repo to view the code in Github).
I hope it helps,
2 Likes
Oh wow! Guess I’ve been working on it for too long that my eyes are playing tricks on me. I had the same issue earlier with text-center, I typed it backwards. Thanks, I take a look at your link in a minute.
1 Like
Like I said the way I did it is not very elegant but it might put you on the right tracks, one never knows.
Good luck 
1 Like
Any input is helpful, even if not the solution I needed, it will help me see other ways to do things. Also, I’m still new to GitHub, I don’t think I know which one to look at, lol.
In the CSS file you’ll have to look at styles.css (or something like that. Actually you’ll see that the rest are like “official” things - ie bootstrap or font-awesome maybe).
You’ll also need to take a look at app.js - that’s how I tried to fix my fixed div with Javascript.
Now I realise it’s not easy when you don’t use Github !
PS I’ve looked again at the page and really, my solution doesn’t give great results. Anyway.
1 Like
Ok, I did see what you were doing. I guess my thinking was that you had tried to fix MY issue, but you were telling me to look at your code and how you tried to fix YOUR issue. I changed the class names and its a little better. I’m reading about the different container classes and how they affect each other. Thanks again.
2 Likes