Mixing
Can I include and exclude html text with media queries? [closed]
I've been using media queries quite a bit lately and I'm just trying to figure out what I can and can't change. My question is simple.
Can you choose to exclude or include certain elements with @media queries?
For example, having designed my website for a mobile device I'd like to also expand it and make it available to larger viewports! However with the bigger viewport, I feel like I'd like to add more content but of course, I don't know if I can do that without adding directly to the HTML code and of course if I do that I'll just add a bunch of stuff to my mobile design.
What can I do in this circumstance?
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px 340px 1fr 50px;
grid-template-areas:
"header"
"advert"
"main"
"footer";
text-align: center;
}
@media only screen /* Tablet */
and (min-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 50px 340px 1fr 50px;
grid-template-areas:
"header"
"advert"
"main"
"footer";
}
@media screen /* Desktop/Laptop */
and (min-width: 1900px) {
.container {
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 10fr 1fr;
grid-template-areas:
"header header"
"advert main"
"footer footer"
}
html css css3 text media-queries
asked Jan 2 at 18:50
MaximilianMaximilian
1258
closed as too broad by Vickel, Nkosi, M-M, Makyen, Machavity Jan 3 at 14:50
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
I've been using media queries quite a bit lately and I'm just trying to figure out what I can and can't change. My question is simple.
Can you choose to exclude or include certain elements with @media queries?
For example, having designed my website for a mobile device I'd like to also expand it and make it available to larger viewports! However with the bigger viewport, I feel like I'd like to add more content but of course, I don't know if I can do that without adding directly to the HTML code and of course if I do that I'll just add a bunch of stuff to my mobile design.
What can I do in this circumstance?
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px 340px 1fr 50px;
grid-template-areas:
"header"
"advert"
"main"
"footer";
text-align: center;
}
@media only screen /* Tablet */
and (min-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 50px 340px 1fr 50px;
grid-template-areas:
"header"
"advert"
"main"
"footer";
}
@media screen /* Desktop/Laptop */
and (min-width: 1900px) {
.container {
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 10fr 1fr;
grid-template-areas:
"header header"
"advert main"
"footer footer"
}
html css css3 text media-queries
asked Jan 2 at 18:50
MaximilianMaximilian
1258
closed as too broad by Vickel, Nkosi, M-M, Makyen, Machavity Jan 3 at 14:50
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
The short answer is yes. It would be more helpful if you provided your HTML and gave a specific example of what you are trying to accomplish.
– Peter
Jan 2 at 18:55
What do you mean by "exclude" and "include" exactly? And what is the code you posted, the one working or the one not working? What did you try so far?
– Armel
Jan 2 at 18:56
I mean include and exclude in the sense that I can show or hide it from my webpage. For example say I have a <p> element and want to hide it for my mobile @media query. How would I go about doing that?
– Maximilian
Jan 2 at 19:54
add a comment |
I've been using media queries quite a bit lately and I'm just trying to figure out what I can and can't change. My question is simple.
Can you choose to exclude or include certain elements with @media queries?
For example, having designed my website for a mobile device I'd like to also expand it and make it available to larger viewports! However with the bigger viewport, I feel like I'd like to add more content but of course, I don't know if I can do that without adding directly to the HTML code and of course if I do that I'll just add a bunch of stuff to my mobile design.
What can I do in this circumstance?
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px 340px 1fr 50px;
grid-template-areas:
"header"
"advert"
"main"
"footer";
text-align: center;
}
@media only screen /* Tablet */
and (min-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 50px 340px 1fr 50px;
grid-template-areas:
"header"
"advert"
"main"
"footer";
}
@media screen /* Desktop/Laptop */
and (min-width: 1900px) {
.container {
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 10fr 1fr;
grid-template-areas:
"header header"
"advert main"
"footer footer"
}
html css css3 text media-queries
asked Jan 2 at 18:50
MaximilianMaximilian
1258
I've been using media queries quite a bit lately and I'm just trying to figure out what I can and can't change. My question is simple.
Can you choose to exclude or include certain elements with @media queries?
For example, having designed my website for a mobile device I'd like to also expand it and make it available to larger viewports! However with the bigger viewport, I feel like I'd like to add more content but of course, I don't know if I can do that without adding directly to the HTML code and of course if I do that I'll just add a bunch of stuff to my mobile design.
What can I do in this circumstance?
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px 340px 1fr 50px;
grid-template-areas:
"header"
"advert"
"main"
"footer";
text-align: center;
}
@media only screen /* Tablet */
and (min-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 50px 340px 1fr 50px;
grid-template-areas:
"header"
"advert"
"main"
"footer";
}
@media screen /* Desktop/Laptop */
and (min-width: 1900px) {
.container {
grid-template-columns: 200px 1fr;
grid-template-rows: 80px 10fr 1fr;
grid-template-areas:
"header header"
"advert main"
"footer footer"
}
html css css3 text media-queries
html css css3 text media-queries
asked Jan 2 at 18:50
MaximilianMaximilian
1258
asked Jan 2 at 18:50
MaximilianMaximilian
1258
asked Jan 2 at 18:50
MaximilianMaximilian
1258
asked Jan 2 at 18:50
MaximilianMaximilian
1258
asked Jan 2 at 18:50
MaximilianMaximilian
1258
1258
closed as too broad by Vickel, Nkosi, M-M, Makyen, Machavity Jan 3 at 14:50
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as too broad by Vickel, Nkosi, M-M, Makyen, Machavity Jan 3 at 14:50
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
The short answer is yes. It would be more helpful if you provided your HTML and gave a specific example of what you are trying to accomplish.
– Peter
Jan 2 at 18:55
What do you mean by "exclude" and "include" exactly? And what is the code you posted, the one working or the one not working? What did you try so far?
– Armel
Jan 2 at 18:56
I mean include and exclude in the sense that I can show or hide it from my webpage. For example say I have a <p> element and want to hide it for my mobile @media query. How would I go about doing that?
– Maximilian
Jan 2 at 19:54
add a comment |
The short answer is yes. It would be more helpful if you provided your HTML and gave a specific example of what you are trying to accomplish.
– Peter
Jan 2 at 18:55
What do you mean by "exclude" and "include" exactly? And what is the code you posted, the one working or the one not working? What did you try so far?
– Armel
Jan 2 at 18:56
I mean include and exclude in the sense that I can show or hide it from my webpage. For example say I have a <p> element and want to hide it for my mobile @media query. How would I go about doing that?
– Maximilian
Jan 2 at 19:54
The short answer is yes. It would be more helpful if you provided your HTML and gave a specific example of what you are trying to accomplish.
– Peter
Jan 2 at 18:55
The short answer is yes. It would be more helpful if you provided your HTML and gave a specific example of what you are trying to accomplish.
– Peter
Jan 2 at 18:55
What do you mean by "exclude" and "include" exactly? And what is the code you posted, the one working or the one not working? What did you try so far?
– Armel
Jan 2 at 18:56
What do you mean by "exclude" and "include" exactly? And what is the code you posted, the one working or the one not working? What did you try so far?
– Armel
Jan 2 at 18:56
I mean include and exclude in the sense that I can show or hide it from my webpage. For example say I have a <p> element and want to hide it for my mobile @media query. How would I go about doing that?
– Maximilian
Jan 2 at 19:54
I mean include and exclude in the sense that I can show or hide it from my webpage. For example say I have a <p> element and want to hide it for my mobile @media query. How would I go about doing that?
– Maximilian
Jan 2 at 19:54
add a comment |
1 Answer
1
active
oldest
votes
There are various ways to show or hide content based on screen size, but the content itself will most likely have to stay in the HTML. I've only ever changed images in CSS. You can use "display:none" in a media query attached to the content you want to show or hide.
For example:
@media(max-width:1200px){
.desktop-content{
display: none;
}
}
@media(min-width:1201px){
.desktop-content{
display: block;
}
}
answered Jan 2 at 19:02
Erica HillErica Hill
566
Very interesting! I’ll give it a go!
– Maximilian
Jan 2 at 19:48
Worked like a charm!
– Maximilian
Jan 2 at 20:41
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There are various ways to show or hide content based on screen size, but the content itself will most likely have to stay in the HTML. I've only ever changed images in CSS. You can use "display:none" in a media query attached to the content you want to show or hide.
For example:
@media(max-width:1200px){
.desktop-content{
display: none;
}
}
@media(min-width:1201px){
.desktop-content{
display: block;
}
}
answered Jan 2 at 19:02
Erica HillErica Hill
566
Very interesting! I’ll give it a go!
– Maximilian
Jan 2 at 19:48
Worked like a charm!
– Maximilian
Jan 2 at 20:41
add a comment |
There are various ways to show or hide content based on screen size, but the content itself will most likely have to stay in the HTML. I've only ever changed images in CSS. You can use "display:none" in a media query attached to the content you want to show or hide.
For example:
@media(max-width:1200px){
.desktop-content{
display: none;
}
}
@media(min-width:1201px){
.desktop-content{
display: block;
}
}
answered Jan 2 at 19:02
Erica HillErica Hill
566
Very interesting! I’ll give it a go!
– Maximilian
Jan 2 at 19:48
Worked like a charm!
– Maximilian
Jan 2 at 20:41
add a comment |
There are various ways to show or hide content based on screen size, but the content itself will most likely have to stay in the HTML. I've only ever changed images in CSS. You can use "display:none" in a media query attached to the content you want to show or hide.
For example:
@media(max-width:1200px){
.desktop-content{
display: none;
}
}
@media(min-width:1201px){
.desktop-content{
display: block;
}
}
answered Jan 2 at 19:02
Erica HillErica Hill
566
There are various ways to show or hide content based on screen size, but the content itself will most likely have to stay in the HTML. I've only ever changed images in CSS. You can use "display:none" in a media query attached to the content you want to show or hide.
For example:
@media(max-width:1200px){
.desktop-content{
display: none;
}
}
@media(min-width:1201px){
.desktop-content{
display: block;
}
}
answered Jan 2 at 19:02
Erica HillErica Hill
566
answered Jan 2 at 19:02
Erica HillErica Hill
566
answered Jan 2 at 19:02
Erica HillErica Hill
566
answered Jan 2 at 19:02
Erica HillErica Hill
566
566
Very interesting! I’ll give it a go!
– Maximilian
Jan 2 at 19:48
Worked like a charm!
– Maximilian
Jan 2 at 20:41
add a comment |
Very interesting! I’ll give it a go!
– Maximilian
Jan 2 at 19:48
Worked like a charm!
– Maximilian
Jan 2 at 20:41
Very interesting! I’ll give it a go!
– Maximilian
Jan 2 at 19:48
Very interesting! I’ll give it a go!
– Maximilian
Jan 2 at 19:48
Worked like a charm!
– Maximilian
Jan 2 at 20:41
Worked like a charm!
– Maximilian
Jan 2 at 20:41
add a comment |
The short answer is yes. It would be more helpful if you provided your HTML and gave a specific example of what you are trying to accomplish.
– Peter
Jan 2 at 18:55
What do you mean by "exclude" and "include" exactly? And what is the code you posted, the one working or the one not working? What did you try so far?
– Armel
Jan 2 at 18:56
I mean include and exclude in the sense that I can show or hide it from my webpage. For example say I have a <p> element and want to hide it for my mobile @media query. How would I go about doing that?
– Maximilian
Jan 2 at 19:54