CODEWITHSUNDEEP
htmlcssresponsive-designflexbox
Paul
Paul

Reputation: 3368

Formatting flexes in media queries

I'm having issues formatting a bar I made. It works perfect on a desktop, but when I try to format it for a mobile device the arrow looking part >, looks for like an upside down L.

In my media query I have done this so far, but cannot figure out how to make it work right..

.forum_links_out {
    margin: 10px;
    background-color: #E0E0E0;
    border: 1px solid black;
    border-radius: 8px;
    display: flex;
    height: 30px;
    overflow: hidden;
    font-size: .5em;
}
.forum_links_out a {
    color: #000000;
    text-decoration: none;
    padding: 10px 30px;
    position: relative;
}
.forum_links_out a:first-child {
    padding-left: 20px;
}
.forum_links_out a span {
    width: 30px;
    height: 30px;
    position: absolute;
    right: -12px;
    top: 4px;
    transform: rotate(45deg);
    z-index: 2;
    border-right: 1px solid black;
    border-top: 1px solid black;
    background-color: #E0E0E0;

}
.forum_links_out a:last-child {
    flex-grow: 1;
}
.forum_links_out a:hover, .forum_links_out a:hover span {
    background-color: #A0A0A0;
}
.forum_links_out a:visited {
    color: #000000;
}

Fiddle

https://jsfiddle.net/vd4hcy43/

Upvotes: 0

Views: 30

Answers (1)

Yandy_Viera
Yandy_Viera

Reputation: 4380

When you set your media query style you don't resize your arrow so it is bigger than your bar

enter image description here

so just resize it in your media like this:

.forum_links_out {
    margin: 10px;
    background-color: #E0E0E0;
    border: 1px solid black;
    border-radius: 8px;
    display: flex;
    height: 30px;
    overflow: hidden;
    font-size: .5em;
}
.forum_links_out a {
    color: #000000;
    text-decoration: none;
    padding: 10px 30px;
    position: relative;
}
.forum_links_out a:first-child {
    padding-left: 20px;
}
.forum_links_out a:after {
    content: '';
    width: 21px;
    height: 21px;
    position: absolute;
    right: -12px;
    top: 4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 2;
    border-right: 1px solid black;
    border-top: 1px solid black;
    background-color: #E0E0E0;

}
.forum_links_out a:last-child {
    flex-grow: 1;
}
.forum_links_out a:hover, .forum_links_out a:hover:after {
    background-color: #A0A0A0;
}
.forum_links_out a:visited {
    color: #000000;
}
<div class="forum_links_out">	
    <a href='discussions.php'>Samsung</a>
	<a>Apple</a>
	<a>HTC</a>
	<a></a>
</div>

Notice that I'm using pseudo elements (:after) to set the arrow instead a dummy span in html, this way is more clear and you avoid unnecessary elements in the html .

Upvotes: 1

Related Questions