How show any class of element with use of media query
Hello everyone i am using media query in my asp.net MVC CSHTML page but it is not working ,It is not showing the element my code is fallowing
@@media (min-width: 320px) and (max-width: 480px) {
.MenSection{
height: 600px;
width: 460px;
}
#menuicon{
display:table;
}
.trMobile{
display:table;
}
#AboutDetails{
margin-top:8px;
margin-left:5px;
padding-left:5px;
padding-top:1px;
display:list-item;
}
#SocialLogin{
width:auto;
}
.AboutDetailsHed{
font-size:18px;
margin-left:5px;
}
}
Here AboutDetailsHed,SocialLogin,AboutDetails is working properly and above three is not working please help me
css
add a comment |
Hello everyone i am using media query in my asp.net MVC CSHTML page but it is not working ,It is not showing the element my code is fallowing
@@media (min-width: 320px) and (max-width: 480px) {
.MenSection{
height: 600px;
width: 460px;
}
#menuicon{
display:table;
}
.trMobile{
display:table;
}
#AboutDetails{
margin-top:8px;
margin-left:5px;
padding-left:5px;
padding-top:1px;
display:list-item;
}
#SocialLogin{
width:auto;
}
.AboutDetailsHed{
font-size:18px;
margin-left:5px;
}
}
Here AboutDetailsHed,SocialLogin,AboutDetails is working properly and above three is not working please help me
css
add a comment |
Hello everyone i am using media query in my asp.net MVC CSHTML page but it is not working ,It is not showing the element my code is fallowing
@@media (min-width: 320px) and (max-width: 480px) {
.MenSection{
height: 600px;
width: 460px;
}
#menuicon{
display:table;
}
.trMobile{
display:table;
}
#AboutDetails{
margin-top:8px;
margin-left:5px;
padding-left:5px;
padding-top:1px;
display:list-item;
}
#SocialLogin{
width:auto;
}
.AboutDetailsHed{
font-size:18px;
margin-left:5px;
}
}
Here AboutDetailsHed,SocialLogin,AboutDetails is working properly and above three is not working please help me
css
Hello everyone i am using media query in my asp.net MVC CSHTML page but it is not working ,It is not showing the element my code is fallowing
@@media (min-width: 320px) and (max-width: 480px) {
.MenSection{
height: 600px;
width: 460px;
}
#menuicon{
display:table;
}
.trMobile{
display:table;
}
#AboutDetails{
margin-top:8px;
margin-left:5px;
padding-left:5px;
padding-top:1px;
display:list-item;
}
#SocialLogin{
width:auto;
}
.AboutDetailsHed{
font-size:18px;
margin-left:5px;
}
}
Here AboutDetailsHed,SocialLogin,AboutDetails is working properly and above three is not working please help me
css
css
edited Nov 21 '18 at 19:47
AkshayTomar
asked Nov 21 '18 at 19:25
AkshayTomarAkshayTomar
246
246
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Have you tried adding a responsive meta tag to your html document?
<meta name="viewport" content="width=device-width, initial-scale=1">
yes already added and i update my question plz check it
– AkshayTomar
Nov 21 '18 at 19:48
add a comment |
It'll be difficult for us to determine how to help you since the syntax is correct. So, here's a simple way to debug your issue.
Since the media query is being added into your context, you need to see why some are not being applied to your elements.
Let's assume you are using Google Chrome browser to debug (emulate a mobile device)
Navigate to your element in the "Elements" pane in dev tools (F12). Go to your element and view the styles for that element. You should see all applied styles. It could be that the style you are setting on the media query is being overwritten by another style.
If that is the case, you need to make sure your media query is added later in your context. Perhaps append !important
to your style property's value.
in asp.net it wil work with @@
– AkshayTomar
Nov 21 '18 at 19:38
I missed the CSHTML part.
– Marius
Nov 21 '18 at 20:10
okey plz help me
– AkshayTomar
Nov 21 '18 at 20:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419241%2fhow-show-any-class-of-element-with-use-of-media-query%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Have you tried adding a responsive meta tag to your html document?
<meta name="viewport" content="width=device-width, initial-scale=1">
yes already added and i update my question plz check it
– AkshayTomar
Nov 21 '18 at 19:48
add a comment |
Have you tried adding a responsive meta tag to your html document?
<meta name="viewport" content="width=device-width, initial-scale=1">
yes already added and i update my question plz check it
– AkshayTomar
Nov 21 '18 at 19:48
add a comment |
Have you tried adding a responsive meta tag to your html document?
<meta name="viewport" content="width=device-width, initial-scale=1">
Have you tried adding a responsive meta tag to your html document?
<meta name="viewport" content="width=device-width, initial-scale=1">
answered Nov 21 '18 at 19:45
JulianJulian
11525
11525
yes already added and i update my question plz check it
– AkshayTomar
Nov 21 '18 at 19:48
add a comment |
yes already added and i update my question plz check it
– AkshayTomar
Nov 21 '18 at 19:48
yes already added and i update my question plz check it
– AkshayTomar
Nov 21 '18 at 19:48
yes already added and i update my question plz check it
– AkshayTomar
Nov 21 '18 at 19:48
add a comment |
It'll be difficult for us to determine how to help you since the syntax is correct. So, here's a simple way to debug your issue.
Since the media query is being added into your context, you need to see why some are not being applied to your elements.
Let's assume you are using Google Chrome browser to debug (emulate a mobile device)
Navigate to your element in the "Elements" pane in dev tools (F12). Go to your element and view the styles for that element. You should see all applied styles. It could be that the style you are setting on the media query is being overwritten by another style.
If that is the case, you need to make sure your media query is added later in your context. Perhaps append !important
to your style property's value.
in asp.net it wil work with @@
– AkshayTomar
Nov 21 '18 at 19:38
I missed the CSHTML part.
– Marius
Nov 21 '18 at 20:10
okey plz help me
– AkshayTomar
Nov 21 '18 at 20:17
add a comment |
It'll be difficult for us to determine how to help you since the syntax is correct. So, here's a simple way to debug your issue.
Since the media query is being added into your context, you need to see why some are not being applied to your elements.
Let's assume you are using Google Chrome browser to debug (emulate a mobile device)
Navigate to your element in the "Elements" pane in dev tools (F12). Go to your element and view the styles for that element. You should see all applied styles. It could be that the style you are setting on the media query is being overwritten by another style.
If that is the case, you need to make sure your media query is added later in your context. Perhaps append !important
to your style property's value.
in asp.net it wil work with @@
– AkshayTomar
Nov 21 '18 at 19:38
I missed the CSHTML part.
– Marius
Nov 21 '18 at 20:10
okey plz help me
– AkshayTomar
Nov 21 '18 at 20:17
add a comment |
It'll be difficult for us to determine how to help you since the syntax is correct. So, here's a simple way to debug your issue.
Since the media query is being added into your context, you need to see why some are not being applied to your elements.
Let's assume you are using Google Chrome browser to debug (emulate a mobile device)
Navigate to your element in the "Elements" pane in dev tools (F12). Go to your element and view the styles for that element. You should see all applied styles. It could be that the style you are setting on the media query is being overwritten by another style.
If that is the case, you need to make sure your media query is added later in your context. Perhaps append !important
to your style property's value.
It'll be difficult for us to determine how to help you since the syntax is correct. So, here's a simple way to debug your issue.
Since the media query is being added into your context, you need to see why some are not being applied to your elements.
Let's assume you are using Google Chrome browser to debug (emulate a mobile device)
Navigate to your element in the "Elements" pane in dev tools (F12). Go to your element and view the styles for that element. You should see all applied styles. It could be that the style you are setting on the media query is being overwritten by another style.
If that is the case, you need to make sure your media query is added later in your context. Perhaps append !important
to your style property's value.
edited Nov 21 '18 at 20:17
answered Nov 21 '18 at 19:34
MariusMarius
867
867
in asp.net it wil work with @@
– AkshayTomar
Nov 21 '18 at 19:38
I missed the CSHTML part.
– Marius
Nov 21 '18 at 20:10
okey plz help me
– AkshayTomar
Nov 21 '18 at 20:17
add a comment |
in asp.net it wil work with @@
– AkshayTomar
Nov 21 '18 at 19:38
I missed the CSHTML part.
– Marius
Nov 21 '18 at 20:10
okey plz help me
– AkshayTomar
Nov 21 '18 at 20:17
in asp.net it wil work with @@
– AkshayTomar
Nov 21 '18 at 19:38
in asp.net it wil work with @@
– AkshayTomar
Nov 21 '18 at 19:38
I missed the CSHTML part.
– Marius
Nov 21 '18 at 20:10
I missed the CSHTML part.
– Marius
Nov 21 '18 at 20:10
okey plz help me
– AkshayTomar
Nov 21 '18 at 20:17
okey plz help me
– AkshayTomar
Nov 21 '18 at 20:17
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419241%2fhow-show-any-class-of-element-with-use-of-media-query%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown