Animated images

Report · Aug 24, 2017

Hello, I don't know if this question belongs to this forum-section, but .....

I have a intro-page (EVISSI ) and would like to have the images full screen, from top to bottom, responsive. Anyone any suggestions?

Report · Aug 24, 2017

If you want full-page backgrounds, put them in your CSS body selector. See screenshot.

Right now, your accordion height & width is constrained to 750px by 1080px.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 24, 2017

Hi Nancy,

Thanks for your answer!

It is not the background of the page, but the images of the tastes (pink, green, red, green fruit) that I want to have responsive from top to bottom. I tried to set the height to 100%, but that didn't work.

Report · Aug 24, 2017

Like I said, your Accordion and the content inside it does not cover 100% of page. To illustrate, but a border around it. Only the BODY covers the whole page.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 25, 2017

Couldn't work that out In the meanwhile I found this .... EVISSI but now I'm working on how to make a link to an other webpage instead of the full image ....

Report · Aug 25, 2017

Have you tested this with JavaScript turned off?

I don't see anything without JS.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 25, 2017

Mobos wrote
Couldn't work that out In the meanwhile I found this .... EVISSI but now I'm working on how to make a link to an other webpage instead of the full image ....

A quick and dirty way to make a link to another webpage instaed of a full image is to wrap your slide containers in an anchor tag like so:

<div class="slide__text slide__text--1">NATURAL DRAGON FRUIT JUICE<br><span class="textintro">TASTE NOW!</span></div>

</div>

</div>

</a>

Rinse and repeat for the other slide containers. Don't worry about the OT mention of the site being dependent on javascript. A very large majority of websites depend on javascript, including Nancy's own website. Hopefully this directly answers your question without going off topic by mentioning meaningless points that dissuade from your objective.

Report · Aug 25, 2017

I see the "off topic" police are back .

I only mention JS because there does not appear to be any fallback or <noscript> message for people who use script blocking add-ons. If you use this approach, that's something you'll need to add at some point.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Aug 26, 2017

Hi EbaySeller and Nancy,

Thanks for your answers, I always like to learn, so whatever you mention ... it's worthwhile thinking it over!!

I used the quick and dirty way and that works perfect!!

The only funny thing is that if one clicks on the "back-arrow" in the browser-field not the total page with 4 slides is shown, but only the image/div/slide on which is clicked in the beginning. Hmmmmm???

Report · Aug 27, 2017

Mobos wrote
Hi EbaySeller and Nancy,
Thanks for your answers, I always like to learn, so whatever you mention ... it's worthwhile thinking it over!!
I used the quick and dirty way and that works perfect!!
The only funny thing is that if one clicks on the "back-arrow" in the browser-field not the total page with 4 slides is shown, but only the image/div/slide on which is clicked in the beginning. Hmmmmm???

Change your pages opening <body> tag to below, see if that makes a difference.

Report · Aug 27, 2017

Thanks, that works great!!

It doesn't work on my phone and pad, but that would be of the JS Nancy mentioned.

Report · Aug 28, 2017

Hmmmmm, it wasn't the JS, the default is in the div of the logo. Instead of the external css EVISSI I put in in the head EVISSI It works now on iPhone, but not on pad????

The logo also isn't responsive (the rest is)??

Report · Aug 29, 2017

One more attempt (before I give up, hihi) .... EVISSI In this version I thought it would be handy that on tel/pad there would be an other intro, so I hide the div (style-intro.css) But .... it doesn't work!

Anyone any idea??

Adobe Community

Animated images

1 Correct answer