having asked about the sticky menu i was told they had used Impact .
basic question having watched the Impact video . It says that Impact will size the image to fit , all i keep getting is this
Ive resized the original from 1500px to 900px to 600px but I’m missing something
tried flexible heights tried fixed height tried proportional and several setings.
How can i make the image fit
How can i reduce the Impact size i.e. do i put it into a 1 column stack , do i use flexible width
All i wanted was a logo that will show on first visit then not show again on that visit , which i can get to work.
all this because i just wanted a sticky menu.
Impact will scale images to fit the aspect ratio you give the stack. Now, unless the image is the same aspect ration as your stack settings the image is going to get scaled.
If you think about it, this is necessary in order to prevent image distortion. Impact will size the image to fit the maximum dimension on the page (usually width) and then pan it to keep it centered. If essentially performs the same function as a background cover image scale does. This is ideally suited to pictures but can cause problems with image content like yours.
In this context a full width piece of text is not the best content as an image. It is inevitable that some will get “cropped” from the screen.
You have several options here. The first and most obvious is to ensure your image is the exact same aspect ratio as the promotional sizing that you set in the impact stack - plus leave a small border around the text in the image to allow for browser rounding errors. BUT - only use impact if you really need a slide show of images. Impact is a very powerful and great stack but is certainly overkill for what you seem to need.
Following the simple is best method - just use a Foundation Image stack above your sticky TopBar, set it to “Grow to container width” and your image will be a normal foreground responsive image that will never crop your text. I’ve made you a very simple example of this in this little demo project https://infinit.io/_/xAhRj5a
Doing it this way, your page will load faster, it will just work and save you a load of hassle if you don’t want a slideshow.
so a 10:3 ratio would be i.e. 1000px x 300px - yes i see.
Thats good - i got side tracked tbh by the mention of impact. Not unusual with RW and stacks.
Thats how i did it originally - it was the sticky menu effect i wanted…
Its all good learning though and once again I thank you for your fast response. I would like to say its the last question I have , but it would be a fib.!
There is just one more - it will be very simple , but plagued me for ages. I bet you can’t wait
Thank you Tav , your help is invaluable .
