Change CSS based on an element's width [duplicate]
This question already has an answer here:
CSS selector based on width?
3 answers
Is there a pure CSS way of specifying different CSS styles for an element, only active when it's, let's say, under a certain width?
Similar to an @media query, but not the whole screen, just the element. Something like...
.element {background: blue;}
.element[max-width=300] {background: red;}
I know how I'd do it with JavaScript, but that sounds so overly complicated... >.<
html css styles
asked Nov 22 at 17:54
DavidsKanal
656
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 19:16
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
CSS selector based on width?
3 answers
Is there a pure CSS way of specifying different CSS styles for an element, only active when it's, let's say, under a certain width?
Similar to an @media query, but not the whole screen, just the element. Something like...
.element {background: blue;}
.element[max-width=300] {background: red;}
I know how I'd do it with JavaScript, but that sounds so overly complicated... >.<
html css styles
asked Nov 22 at 17:54
DavidsKanal
656
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 19:16
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
3
Not possible with pure css - the only thing you could do is figure out the screen widths for these specific widths and use a media query
– Pete
Nov 22 at 18:00
add a comment |
This question already has an answer here:
CSS selector based on width?
3 answers
Is there a pure CSS way of specifying different CSS styles for an element, only active when it's, let's say, under a certain width?
Similar to an @media query, but not the whole screen, just the element. Something like...
.element {background: blue;}
.element[max-width=300] {background: red;}
I know how I'd do it with JavaScript, but that sounds so overly complicated... >.<
html css styles
asked Nov 22 at 17:54
DavidsKanal
656
This question already has an answer here:
CSS selector based on width?
3 answers
Is there a pure CSS way of specifying different CSS styles for an element, only active when it's, let's say, under a certain width?
Similar to an @media query, but not the whole screen, just the element. Something like...
.element {background: blue;}
.element[max-width=300] {background: red;}
I know how I'd do it with JavaScript, but that sounds so overly complicated... >.<
This question already has an answer here:
CSS selector based on width?
3 answers
html css styles
html css styles
asked Nov 22 at 17:54
DavidsKanal
656
asked Nov 22 at 17:54
DavidsKanal
656
asked Nov 22 at 17:54
DavidsKanal
656
asked Nov 22 at 17:54
DavidsKanal
656
asked Nov 22 at 17:54
DavidsKanal
656
656
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 19:16
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Temani Afif css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 22 at 19:16
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
3
Not possible with pure css - the only thing you could do is figure out the screen widths for these specific widths and use a media query
– Pete
Nov 22 at 18:00
add a comment |
3
Not possible with pure css - the only thing you could do is figure out the screen widths for these specific widths and use a media query
– Pete
Nov 22 at 18:00
3
3
Not possible with pure css - the only thing you could do is figure out the screen widths for these specific widths and use a media query
– Pete
Nov 22 at 18:00
Not possible with pure css - the only thing you could do is figure out the screen widths for these specific widths and use a media query
– Pete
Nov 22 at 18:00
add a comment |
1 Answer
1
active
oldest
votes
Media queries will only work on the size of the screen of the device i.e. on the media that the website is viewed on. So, unfortunately, you can't do this with CSS.
JavaScript may sound like a complicated and over-the-top method, but it would be the best, most efficient and most maintainable method. If you were to use this with a lot of elements on a page, you could even look at using something like React or Angular. These would be would be very over-the-top for something small but would make it easier to maintain and work with, if you were doing this on a larger scale.
If you could work out what the size of the entire screen would be for the size of those particular elements at the size you would want to change them, you could try and use a media query. This would probably be more complicated that JavaScript and probably would make maintenance even more complicated.
answered Nov 22 at 19:12
TheRealBilaal
363
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Media queries will only work on the size of the screen of the device i.e. on the media that the website is viewed on. So, unfortunately, you can't do this with CSS.
JavaScript may sound like a complicated and over-the-top method, but it would be the best, most efficient and most maintainable method. If you were to use this with a lot of elements on a page, you could even look at using something like React or Angular. These would be would be very over-the-top for something small but would make it easier to maintain and work with, if you were doing this on a larger scale.
If you could work out what the size of the entire screen would be for the size of those particular elements at the size you would want to change them, you could try and use a media query. This would probably be more complicated that JavaScript and probably would make maintenance even more complicated.
answered Nov 22 at 19:12
TheRealBilaal
363
add a comment |
Media queries will only work on the size of the screen of the device i.e. on the media that the website is viewed on. So, unfortunately, you can't do this with CSS.
JavaScript may sound like a complicated and over-the-top method, but it would be the best, most efficient and most maintainable method. If you were to use this with a lot of elements on a page, you could even look at using something like React or Angular. These would be would be very over-the-top for something small but would make it easier to maintain and work with, if you were doing this on a larger scale.
If you could work out what the size of the entire screen would be for the size of those particular elements at the size you would want to change them, you could try and use a media query. This would probably be more complicated that JavaScript and probably would make maintenance even more complicated.
answered Nov 22 at 19:12
TheRealBilaal
363
add a comment |
Media queries will only work on the size of the screen of the device i.e. on the media that the website is viewed on. So, unfortunately, you can't do this with CSS.
JavaScript may sound like a complicated and over-the-top method, but it would be the best, most efficient and most maintainable method. If you were to use this with a lot of elements on a page, you could even look at using something like React or Angular. These would be would be very over-the-top for something small but would make it easier to maintain and work with, if you were doing this on a larger scale.
If you could work out what the size of the entire screen would be for the size of those particular elements at the size you would want to change them, you could try and use a media query. This would probably be more complicated that JavaScript and probably would make maintenance even more complicated.
answered Nov 22 at 19:12
TheRealBilaal
363
Media queries will only work on the size of the screen of the device i.e. on the media that the website is viewed on. So, unfortunately, you can't do this with CSS.
JavaScript may sound like a complicated and over-the-top method, but it would be the best, most efficient and most maintainable method. If you were to use this with a lot of elements on a page, you could even look at using something like React or Angular. These would be would be very over-the-top for something small but would make it easier to maintain and work with, if you were doing this on a larger scale.
If you could work out what the size of the entire screen would be for the size of those particular elements at the size you would want to change them, you could try and use a media query. This would probably be more complicated that JavaScript and probably would make maintenance even more complicated.
answered Nov 22 at 19:12
TheRealBilaal
363
answered Nov 22 at 19:12
TheRealBilaal
363
answered Nov 22 at 19:12
TheRealBilaal
363
answered Nov 22 at 19:12
TheRealBilaal
363
363
add a comment |
add a comment |
3
Not possible with pure css - the only thing you could do is figure out the screen widths for these specific widths and use a media query
– Pete
Nov 22 at 18:00