[Pro] For You CSS Wizards...

I’m befuzzled.

I’m building a flexible mobile version of a website. All widths are in %'s, all text is in em’s. However, the only image is causing trouble. I have applied the flexible image action to the image, but I don’t want the image growing wider than 500px.

I thought “that’ll be easy, I’ll add max-width: 500px to the extended dialog.” However, that doesn’t seem to be working. Take a look:

http://spokanecivilwar.com/dev/m/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You need to add the max-width attribute as part of the attribute, not the img itself. So Item / Extended, then look for a tab in that dialog labeled with the word style. Add max-with there, and remove it from the image itself.

Walter

On Jan 17, 2013, at 2:27 PM, Caleb Grove wrote:

I’m befuzzled.

I’m building a flexible mobile version of a website. All widths are in %'s, all text is in em’s. However, the only image is causing trouble. I have applied the flexible image action to the image, but I don’t want the image growing wider than 500px.

I thought “that’ll be easy, I’ll add max-width: 500px to the extended dialog.” However, that doesn’t seem to be working. Take a look:

http://spokanecivilwar.com/dev/m/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter,

Thanks for the correction, but it’s still not working.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You haven’t done it yet. Here’s the HTML I see:

<img src="../../Resources/horsescropped.jpeg" border="0" width="100%" alt="HorsesCropped" max-width="500px" style="vertical-align:middle; margin:auto">

Here’s what it needs to say:

<img src="../../Resources/horsescropped.jpeg" border="0" width="100%" alt="HorsesCropped" style="vertical-align:middle; margin:auto; max-width: 500px">

Completely different syntax, and in a different part of the tag – inside the style attribute, not hanging out as a faux attribute by itself.

Walter

On Jan 17, 2013, at 2:44 PM, Caleb Grove wrote:

Walter,

Thanks for the correction, but it’s still not working.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your max-width on the image is set to 500… is that 500 miles? 500 bananas?
:slight_smile:

Try 500px :smiley:


Ernie Simpson

On Thu, Jan 17, 2013 at 2:44 PM, Caleb Grove email@hidden wrote:

Walter,

Thanks for the correction, but it’s still not working.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s amazing what a typo can do! Good catch Ernie.

Walter; This time it is in the style tag. For some reason Freeway didn’t fully upload it the first time.

Now the image isn’t growing past 500px (Yay!), but I seem to have struck another problem. The image won’t center horizontally (the margins are set to auto).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Images need to be set to be a block display style (they default to inline) before they will center using margin:auto:

<img src="foo" width="100%" alt="horses" style="max-width: 500px; display:block; margin: auto" />

Something like that might work.

Walter

On Jan 17, 2013, at 3:20 PM, Caleb Grove wrote:

It’s amazing what a typo can do! Good catch Ernie.

Walter; This time it is in the style tag. For some reason Freeway didn’t fully upload it the first time.

Now the image isn’t growing past 500px (Yay!), but I seem to have struck another problem. The image won’t center horizontally (the margins are set to auto).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just figured it out:

  1. Insert an inline HTML box. Set width to 100% and in the extended style dialog set max-width to 500px. Set its margin to auto in the inspector.
  2. Inside that HTML box, insert the image, also inline. Using the flexible image action, set its width to 100%. In the extended style dialog, set it to have a max-width of 500px. Leave the margin box empty.
  3. Go back to that HTML box, and de-select the height from the inspector.

Now you have a centered, flexible to 500px, inline image!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can also add a text-align:center to the parent paragraph tag which will do the same thing in this example.

<p style="text-align:center"><img src="../../Resources/horsescropped.jpeg" border=0 width="100%" alt="HorsesCropped" style="vertical-align:top; max-width:500px"></p>

Regards,
Tim.

On 17 Jan 2013, at 20:29, Walter Lee Davis wrote:

Images need to be set to be a block display style (they default to inline) before they will center using margin:auto:


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Six of one, half-dozen of the other:

http://scripty.walterdavisstudio.com/horses.html

That’s using the display:block; margin: auto technique.

Walter

On Jan 17, 2013, at 3:45 PM, Tim Plumb wrote:

You can also add a text-align:center to the parent paragraph tag which will do the same thing in this example.

<p style="text-align:center"><img src="../../Resources/horsescropped.jpeg" border=0 width="100%" alt="HorsesCropped" style="vertical-align:top; max-width:500px"></p>

Regards,
Tim.

On 17 Jan 2013, at 20:29, Walter Lee Davis wrote:

Images need to be set to be a block display style (they default to inline) before they will center using margin:auto:


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 17 Jan 2013, at 19:27, Caleb Grove email@hidden wrote:

http://spokanecivilwar.com/dev/m/

Look great Caleb. It’s good to see some responsive sites being created in Freeway!

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Joe, I’m not sure if I’d call it responsive, considering that it doesn’t have any @media queries. Thanks for the complement though!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hey, if it responds to my device and/or window size, it’s responsive to me.

Joe

On 18 Jan 2013, at 03:39, “Caleb Grove” email@hidden wrote:

Joe, I’m not sure if I’d call it responsive, considering that it doesn’t have any @media queries. Thanks for the complement though!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Agreed. This is one of the things I like about web design is that there is often many ways to get that cat skin off.
Regards,
Tim.

(No cats were harmed in the making of this email). :wink:

On 17 Jan 2013, at 21:49, Walter Lee Davis wrote:

Six of one, half-dozen of the other


Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Caleb. I poked around trying to find what image gallery you are using on http://spokanecivilwar.com/dev/m/ and turns out to be Softpress’s own Exhibeo. I had forgotten about it. Good to see it in action. Nice stuff. http://exhibeoapp.com.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options