/    Sign up×
Community /Pin to ProfileBookmark

Flex doesn’t work in media query

Copy linkTweet thisAlerts:
May 24.2019

Hello ,
I have this code for my contact container

[code].contact-flex {
display: flex;
justify-content: space-around;
width: 100%;
min-height: 300px;
}[/code]

but when I add this to a media query

[code]@media (max-width: 784px) {
.contact-flex {
flex-direction: row;
}
}[/code]

It doesn’t changes to row.
Why is that ?
You can see the codepen here: https://codepen.io/raul-rogojan/pen/LoOoVm?editors=0100

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMay 24.2019 — flex-direction: row;is default, therefore the is no difference between specifying and omitting it. "row" arranges item side by side whereas "column" arranges them one below each other. Did you intend you achieve the latter by your media query?
Copy linkTweet thisAlerts:
@codyhillauthorMay 24.2019 — @Sempervivum#1604016 oh you right. I tried to set the flex to initial or inherit but didnt worked , i had to set it cu column.

Can I ask you something ? on Mobil every time I click on a arrow or the logo a blue rectangle appears . How do I get rid of it ? I tried with :focus but doesn't work .
Copy linkTweet thisAlerts:
@SempervivumMay 24.2019 — Which OS is on your mobile and which browser are you using?
Copy linkTweet thisAlerts:
@codyhillauthorMay 24.2019 — @Sempervivum#1604019 android and chrome
Copy linkTweet thisAlerts:
@SempervivumMay 24.2019 — I found this

https://stackoverflow.com/questions/45049873/how-to-remove-the-blue-background-of-button-on-mobile

and gave it a try but no success:

https://codepen.io/Sempervivum/pen/EzEQQZ?editors=1100

Now I'm helpless.
Copy linkTweet thisAlerts:
@codyhillauthorMay 24.2019 — @Sempervivum#1604021 well , thanks for trying
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...