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
Luke Lappen
3,524 PointsFlexbox Code not working. Is it my browser?
.container { display: flex; }
this is my code same exact as the instructors. His changes the items to smaller boxes but mine don't change. Is it the Safari browser?
6 Answers
Luke Lappen
3,524 Pointsalso fixed the problem by updating the browser. No need for the webkit anymore.
Luke Lappen
3,524 PointsOnly way i could get it to work was to display it as a webkit.
display: -webkit-flex;
Henrik Hansen
23,176 PointsThere is also some support for IE10 with -ms- prefix. iOS8 and the Android 4.3 browser uses -webkit- prefix.
Daniel Gauthier
15,000 PointsHey Ignacio,
While a lot of cases are easier to figure out when the code is provided, there are a few things to note in this case:
The user agent stylesheet is the default stylesheet as defined by your browser.
The user agent stylesheet has a low priority, meaning that your stylesheet(s) will overwrite styles included in the user agent stylesheet.
Not having the <!DOCTYPE html> tag as your first line of code can cause some issues of this nature.
It sounds as though your issue could be a specificity issue though, so check the selector of the div you're trying to target to make sure that you're actually targeting it.
It's possible that you've mixed up the class selector ( . ) with the id selector ( # ) for instance.
Along the lines of specificity, if you're still having issues after checking your selector, remember that priority in css is given based on specificity. So, if your selectors seem to be right, try to target them with more specificity.
As a quick example, let's say you were trying to change the font size of the text in a div element that was identified with a class named mainContent.
If you used the code:
.mainContent { font-size: 2em; }
and the code didn't seem to be working, there is a chance that something in the css with a higher specificity is already telling the browser to set the font size to 1em.
In order to override that more specific command, you need to get more specific with your selector to force it to take precedence.
So, assuming mainContent div was a direct child of another div with an id of container, you could try to get more specific by including the containing div in your selector, like this:
#container .mainContent { font-size: 2em; }
Hopefully this casts a little light onto the issue for you, but if not, your code would definitely help in pinpointing the issue.
If you're not sure how to post code on the forums, I'll paste in the instructions below:
How to Post Code on the Forums
There are two ways to share your code on the forums here, excluding using external tools from outside of Treehouse.
Method One
The first method is to use a series of three ` (backticks, located at the top left of the keyboard) without any spaces on one line, paste all of your code starting on the second line, then closing the code block with a second series of three backticks. Take a peek at the link for the "Markdown Cheatsheet" located above the "Post Answer" button anytime you're about to post a comment or answer. Using this method, the code will look like this:
```css
(code here)
```
Method 2
The second method is a little more convoluted, but it lets us look at your entire project and make our own copy to try fixing issues. I'll order the steps since it can be a little confusing the first time around:
Open the workspace you're having trouble with.
On the menu bar located to the left of the "Preview Workspace" button is the "Snapshot Workspace" (camera icon), click that.
A popout will appear with another button that says "Take Snapshot", click that.
It should create a new snapshot, which will appear beneath the "Take Snapshot" button in the popout. Click the snapshot you want to share.
The snapshot should open a new browser tab. Highlight the url in the snapshot's browser tab (it should look like this: https://w.trhou.se/5q36uv0z0f ).
Create your forum post and paste the snapshot's url into the post. Other Treehouse users will be able to open the snapshot, then 'fork' a new copy to check out your code.
Keep in mind that you can only ever have five snapshots, but you can delete them by hovering over the snapshot located below the "Take Snapshot" button in the popout and clicking the trash bin icon.
Good luck!
Gary Melican
10,194 PointsThanks Luke.
I had the same problem but once I saw your answer I updated my browser.
Problem fixed, party rockin' once more!
Ignacio Andres Rumbo
6,638 Pointshi have a question! the browsers applies "user agent stylesheet" at my code to a div containers overwritting my code. In the "head" section i am using normalize.css too. how can i fix that??
Ignacio Andres Rumbo
6,638 Pointsthanks friends!
Daniel Gauthier
15,000 PointsDaniel Gauthier
15,000 PointsAwesome of you to come and give a solution yourself for anyone who experiences this in the future.