Creating dynamic speech bubble with media query - css

Question

I have a container div I'm using to create a speech bubble pointing to the right like this:
.container {
width: 90%;
height: auto;
padding: 10px;
position: relative;
border-radius: .4em;
}
.container:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-left-color: #ffffff;
border-right: 0;
border-top: 0;
margin-top: -0.406em;
margin-right: -0.812em;
}
When the screen is smaller than 700px, I need the following CSS to apply instead, which creates a pointer facing down instead of right:
.container:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}
This is how I'm trying to accomplish this, but the speech bubble doesn't seem to react.
#media(max-width:700px) {
.container:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 0.813em solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -0.406em;
margin-bottom: -0.812em;
}
}
If I apply that code directly to .container:after outside of the media query it displays perfectly, but I can't seem to use media query to switch between the two types of speech bubbles. I'm guessing this is a syntax error, do I need to target the div ID instead of the class? The ID is chat_bubble, and here's a code pen.
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ

Answer 1

Your media query is working just fine, the "problem" with your code is that your default styling (Outside of media query) is also applying to the part that's within media query, so under 700px viewport, your :after element has both top: 50%, as well as bottom: 0 properties, same goes for left and right properties, which is why you don't get to see your speech bubble triangle, you can fix this by setting top and right properties to unset for example. otherwise, another solution is to create another media query that will apply 700 pixels and upwards and have your default pseudo element styling
`#media(min-width:700px) {
...
}`
so that your element properties don't "overlap" each other.