Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJon W
6,185 PointsHow do you remove a CSS property?
I'm trying to get FlexSlider to respond to the height as well as the width without distorting the image. I found the problem is that IMG within .flexslider .slider img is given "width: 100%". If I remove this using Chrome Devtools, it fixes the problem.
Now how do I do this with Jquery? I've tried:
$('.flexslider .slides img').css("width", "");
...however that doesn't remove the property, it just leaves it as it is.
I could modify flexslider.css I guess and change width: 100% to max-width: 100%, but don't really want to touch someone elses plugin.
2 Answers
Ryno Botha
Courses Plus Student 4,055 PointsTry:
$('.flexslider .slides img').css({"width" : ""});
Tom Bedford
15,645 PointsWhat happens if you use JS to set the width to auto
rather than "nothing"? If you are using the height to control the size of the image then width: auto
should keep it in proportion.
I'm guessing this would be:
$('.flexslider .slides img').css("width", "auto");
Ryno Botha
Courses Plus Student 4,055 PointsRyno Botha
Courses Plus Student 4,055 PointsYou also have the option of wholly removing the style attribute:
$('.flexslider .slides img').removeAttr("style");
Jon W
6,185 PointsJon W
6,185 PointsHi Ryno.
I'm pretty sure your suggestion:
$('.flexslider .slides img').css({"width" : ""});
... is the same as mine its just you're selecting the property in an object. I tried it anyway and it still doesn't work.
I think I'm going to modify flexslider.css and change it to "max-width: 100%" and add a new style with "width: 100%" and add/removeClass in JQuery when I need it.
Btw I accidentally marked your answer as best answer when I shouldn't have. But I guess it is the best answer even though it didn't exactly solve my problem :-) Thanks anyways!
Ryno Botha
Courses Plus Student 4,055 PointsRyno Botha
Courses Plus Student 4,055 Pointshaha yeah ^^ well might be that you'll have to use !important to overwrite the width in the .css but think it'll be best to change it in the .css because we don't really want to use !important
Hope you get it to work~ x)
No problem x)
Ryno Botha
Courses Plus Student 4,055 PointsRyno Botha
Courses Plus Student 4,055 Pointslast one, xD Try:
$('.flexslider .slides img').attr('width', '');
Ryno Botha
Courses Plus Student 4,055 PointsRyno Botha
Courses Plus Student 4,055 PointsCheck:
http://www.jquery4u.com/dynamic-css-2/change-css-jquery/
Might find something useful~