Ok; built a simple site using FW7* and Pulsecms. All generally fine, something of a learning curve (re learning) but ok. However the images that come in from the cms do not resize, text is fine but images, the form and thumbnail galleries, mess things up with not resizing as they should. Well they do in the Pulse template sites I’ve made.
Also gave Caleb’s Backdraft a spin which is excellent btw.
Any thoughts ?
thanks,
s
freewaytalk mailing list
email@hidden
Update your subscriptions at:
img {
max-width: 100%;
width: auto !important;
height: auto !important;
}
Beware: This will make every single image on the page flexible. There doesn’t seem to be any styling hooks to plug into, so that’s why we’re using a broad brush. Wrap it in <style> tags and drop it in before the page </head> tag.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
That generally works just grand, only issue I can see is that the galleries (http://www.cpartist.co.uk/cpbooks.php) and form pages need a tiny tweak when viewed on a tablet to size down to fit the screen. A bit clunky when resizing browser window but of course thats not such an issue. Other pages work fine. I’ll maybe need to play around with the size of the relevant div’s. of those elements.
Might be interesting to see if it works better using BD rather than my messed about first FW7 attempt.
S
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I thought I had replied but it appears … or rather it doesn’t, odd.
Anyway, thanks, I’ll change that. Leaving the ‘max-height: 100%’ element that seems to have solved the latter issue, on from Caleb’s rescue.
Pulse doesn’t it seem play too well with FW7, still a few issues to try and resolve but I need to check on something other than a nexus 7.
Might just stick to the pulse templates that work well.
cheers,
s
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I’m going to weigh in here with this thought… Percentage values should never be used with max or min dimension properties.
If you want to assign a % value, assign it to the width or height properties. Max-width works like this:
width: %; max(min)-width: px
Min and max are limiters so you set the relative width and height of an object to its parent situation, but put brakes on absurdities of extremes.
If you don’t want a flexible item to shrink below a certain value, then min is your choice. If you want a flexible item not to grow above a certain value, then max is your choice.
###Example1:
You have a container you want to take about 20% of the parent width, but never smaller than 150px, then:
width: 20%; min-width: 150px;
###Example 2
If you have a flexible container that you never wish to grow wider than 960px… like a content container centered in the main PageDiv, then:
max-width: 960px; margin: 0 auto;
<!-- width: 100% is assumed, provided some other style is not interfering -->
###Auto
“Auto” with dimension properties like width or height is not totally necessary. It’s like telling the browser “you figure it out.” If the browser could respond, it would just say “Duh.”
That’s all.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I’ll look at your thoughts when I’m clearer of mind, a long day and not with a website for a change.
I expect there will be some comeback given your input on the bit of code I’ve just used and that seems to work to make video responsive on this page. Still to road test http://www.cpartist.co.uk/cpabout.php
Anyhow I was going to add to this thread anyway for those that might encounter same. Any improvements welcome.
@media screen and (max-width: 750px) {
iframe {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
s
freewaytalk mailing list
email@hidden
Update your subscriptions at:
When it comes to images, max-width:100% means a very different thing than it would if it was applied to a div. With a div, I agree, that CSS would be nonsense. However, when applied to an image, it means “don’t let the image grow to be bigger than it’s native pixel dimensions”. On the other hand, width:100% would be interpreted at “make the image match the width of it’s container”. This is rarely desired, as it can result in very low-resolution graphics.
width:auto is used to override the width attribute of the <img> tag. Because we are using the max-width property to set the image size, no value other than auto makes any sense.
Oh, derp, I now see that Seoras was trying to apply that code to an iframe. My comment above only applies to images, and I wouldn’t use that CSS for iframes.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Now I know the obvious flaw in this plan is not knowing ahead of time what the natural image width is… then also having to write a style for every image you want to be responsive in the way outlined at the beginning.
The browser, however, knows the natural width of each image. We can take advantage of that by writing our image style this way:
width: 100%;
max-width: intrinsic;
height: auto;
This lets the image scale proportionally without exceeding its natural size. For images that scale with their container, this:
width: 100%;
height: auto;
And that’s what I think.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Tim, a much smoother solution than what I managed to find but I can’t have my client add code other than paste a youtube embed code. Also redactor have removed the iframe (video) button so you now just paste iframe code straight into text area, adding extra code would then require going into code view. [though my client has a science PHD she would not appreciate having to do that]
What would your solution be for Vimeo.
I’ve since viewed on an iphone and the site seems fine (client happy), resolved video post but should be ok. Clunky on android tablet with the pages that have two side by side elements.
thanks again all,
s
freewaytalk mailing list
email@hidden
Update your subscriptions at:
