# Responsive images

**URL:** <https://discourse.softpress.com/t/responsive-images/17770>\
**Category:** Dynamo\
**Created:** [June 13, 2013, 8:10pm UTC](https://discourse.softpress.com/t/responsive-images/17770 "2013-06-13T20:10:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [June 13, 2013, 8:10pm UTC](https://discourse.softpress.com/t/responsive-images/17770/1 "2013-06-13T20:10:19Z")

</div>

Important note here: [How to proportionally scale images that have dimension attributes | 456 Berea Street](http://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/)

Walter

* * *

dynamo mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Caleb\_G1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/c/f475e1/32.png) [@Caleb\_G1](https://discourse.softpress.com/u/Caleb_G1)\
**Post date:** [June 14, 2013, 1:27am UTC](https://discourse.softpress.com/t/responsive-images/17770/2 "2013-06-14T01:27:32Z")

</div>

The last option mentioned is the one I employed for Backdraft:

```
width:auto !important;
height:auto !important;
max-width:100% !important;

```

If you don’t employ the annoying `!important`, Freeway’s own CSS will override it.

* * *

dynamo mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![waltd](https://discourse.softpress.com/user_avatar/discourse.softpress.com/waltd/32/2720_2.png) [@waltd](https://discourse.softpress.com/u/waltd)\
**Post date:** [June 14, 2013, 1:46am UTC](https://discourse.softpress.com/t/responsive-images/17770/3 "2013-06-14T01:46:49Z")

</div>

There’s usually ways around that. If you’re trying to override a master page CSS setting, you need to do `#whatever, #whatever.f-ms { your style here }` to overcome the greater specificity of the compound selector. Then, as long as your override style comes later in the source order, it will have enough “juice” to overcome the Freeway style.

Walter

On Jun 13, 2013, at 9:27 PM, Caleb Grove wrote:

> The last option mentioned is the one I employed for Backdraft:
> 
> width:auto !important;  
> height:auto !important;  
> max-width:100% !important;
> 
> If you don’t employ the annoying `!important`, Freeway’s own CSS will override it.
> 
> * * *
> 
> dynamo mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

dynamo mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Ernie\_Simpson](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/e/a587f6/32.png) [@Ernie\_Simpson](https://discourse.softpress.com/u/Ernie_Simpson)\
**Post date:** [June 14, 2013, 1:52am UTC](https://discourse.softpress.com/t/responsive-images/17770/4 "2013-06-14T01:52:13Z")

</div>

I know that !important is like a Get Out of Jail Free card for web  
designers, but it always feels to me like an admission of defeat.

–  
Ernie Simpson

On Thu, Jun 13, 2013 at 9:27 PM, Caleb Grove [email@hidden](mailto:email@hidden) wrote:

> The last option mentioned is the one I employed for Backdraft:
> 
> ```
> width:auto !important;
> height:auto !important;
> max-width:100% !important;
> 
> ```
> 
> If you don’t employ the annoying `!important`, Freeway’s own CSS will  
> override it.
> 
> * * *
> 
> dynamo mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

dynamo mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Caleb\_G1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/c/f475e1/32.png) [@Caleb\_G1](https://discourse.softpress.com/u/Caleb_G1)\
**Post date:** [June 14, 2013, 2:08am UTC](https://discourse.softpress.com/t/responsive-images/17770/5 "2013-06-14T02:08:38Z")

</div>

> There’s usually ways around that. If you’re trying to override a master page CSS setting, you need to do #whatever, #whatever.f-ms { your style here } to overcome the greater specificity of the compound selector.

Correct. The reason why I didn’t go that route is because I couldn’t predict what the Backdraft customers would name the element, and there are usually more than one instance of a flexible image per page. There is no excuse for using `!important` while hand-coding, as you have complete control over the selectors. However, when you are dealing with a program like Freeway, there is sometimes no alternate way to style an element.

* * *

dynamo mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)