Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Daniel Hernandez
13,437 PointsNeed help with website I am building
I am having trouble with the website I am building. It is a generic website for an electric company, something to just put in a portfolio once I can get it to work. So I been having problems, the picture is unresponsive to resizing on workspaces but is responsive on codepen. I don't know what could be causing that. The jquery fadein function also works in codepen but not in workspaces. I also need to make the three bootstrap services cards go horizontal during larger screens but it has so far refused to comply. I have put it in a flex-box and set the wrap parameter on as well as used media queries to float them to the left but still nothing. I also need them to resize to take up available screen length too.
I have only recently started coding, I have more luck on smaller components of the website but putting them together I struggle.
thanks!
here is a link to the codepen, try it in workspaces to see what I mean regarding the picture.
https://codepen.io/DannyHz/pen/MGMeov
4 Answers
Steven Parker
231,269 PointsBefore seeing your snapshot, I noticed a few things in your codepen. First, you have codepen loading bootstrap and jQuery, which wouldn't happen in the workspace or a live site. You should turn those off and rely on loading them directly.
Once you do that, you'll notice that the "slim" version of jQuery doesn't support animation effects, so that alone explains part of it.
Post a comment indicating if there's still issues needing analysis in the snapshot.
And what's up with those huge sha384 SRI codes? I only see sha256's on the jQuery site.
Daniel Hernandez
13,437 PointsOkay I changed the script src for jquery and that has solved the animation effect. Thanks! Another issue I was having was regarding the sizing of the picture. It is in a class called .pic1 and it refuses to resize on the workspace. It works fine on codepen but it is completely unresponsive on workspaces for me. And also I cannot get the cards to lay horizontally on larger screen. I have tried using flex-box and media queries with floats but nothing has worked.
Steven Parker
231,269 PointsRemember to post a new snapshot. Also, in the codepen, only 2 of the 3 cards line up horizontally no matter how wide I make the screen.
Steven Parker
231,269 PointsI'm not sure about the difference in codepen, but one rule I learned early on with Bootstrap is that if you're going to use it, you need to do things the "Bootstrap way". This means avoiding CSS except when you're certain there's no Bootstrap facility for what you need, and being very careful about structuring your pages using containers and Bootstrap classes.
I fixed the card stacking by adding the class "row" to the "services-cards" div. And the image became responsive when I added "img-fluid" to its classes.
There's a number of constraints (including fixed pixel sizes) in the CSS, both in and out of media queries, that probably should be removed to avoid other issues even though Bootstrap seems to be effectively overriding them for now.
Daniel Hernandez
13,437 PointsOh that sounds like a much better idea than the codepen link. Here is a link to the snapshot https://w.trhou.se/g7gmooz5t4
Daniel Hernandez
13,437 PointsHere is my new snapshot with the jquery working now. https://w.trhou.se/2vfan2vpwu It is odd that it is doing that because on the workspace preview,the only thing that happens for me is that the columns remain vertical to each other. But yet I see that it layers in two columns on codepen too.. Could this be happening because I have flex-boxes enabled on a flex-container containing bootstrap document elements that are already flex-boxes? I don't know, it is rather odd how the code is acting so differently from codepen to the workspaces for me.
Daniel Hernandez
13,437 PointsThanks Steven! You really helped me out here.
Steven Parker
231,269 PointsSteven Parker
231,269 PointsYou could make a snapshot of your workspace and post the link to it here.