[mort1m]

Excellent! Exactly what I was looking for. Thank you so much for solving my problem, Christoph 🙂

[mort1m]

Yes, on the other tour pages where there is not so much content. Like here:

Czestochowa – Black Madonna Tour

If you start filling out the gravity form in the side bar, it extends lower than the content area, probably revealing the ".site-inner" area.

[mort1m]

I can see that when the widget expands (its a gravity form with some conditional logic that makes the widget longer as you fill out the form), the main content area gets the background color of the sidebar too. I can live with that, but is there an easy solution to get rid of that too?

[mort1m]

Hi Christoph, thanks for taking your time. That did the trick 🙂 Much appreciated!

[mort1m]

Hi Christoph. The problem is not really solved. At the site, there is now background color only behind the widget, not the whole sidebar container (as the main content stretches longer down than the widget in the sidebar) Suggestions are still welcome 🙂

[mort1m]

Thanks again, Davinder! You've helped me before too, I will not forget. I'm learning day by day, but still have a long way to go I suppose...

[mort1m]

Thanks for taking your time, David - that was exactly what I wanted! If possible, I would like a slight change through - how do I change the code if I'd like the first post to be the one starting with the blue background?

[mort1m]

Thanks for your input again, Davinder 🙂 I got the last one working with the dashicon-arrow, removing lots of code (as I did not want to use font awesome either) and ended up with this - that seems to work fine:

.bounce {
 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
}
 
@-webkit-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
 40% {-webkit-transform: translateY(-30px);}
 60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-30px);}
 60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-30px);}
 60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-30px);}
 60% {transform: translateY(-15px);}
}

[mort1m]

Hi Davinder - thanks for your suggestions and time.

Unfortunately, neither of those work very well. When I put the CSS in style.css and the html in an text widget, the first one does not animate at all - the icon just stands still. The second one animates, but sits in the bottom of the screen and noe where i want it to be.

[mort1m]

Thanks Tom, works like a charm now 🙂

[mort1m]

Hi Tom, and thanks for your respond.

The problem is partly solved, or not that visible now after I deactivated a plugin, but I's still there. I'll try to explain a bit better:

First - I did modify the width of the content in the widget areas from 1280px to 900px. At first, this appeared to work fine, but there's a small glitch here. If you try to narrow the browser window by dragging the right side of it to the left (making the browser window narrower) - like if you wanted to see how the theme acts/responds to smaller screens or to test the responsiveness of the theme - you'll see that the content actually expands a bit in width before it adapts to the narrower window and starts to get responsive and narrower.

It's not very visible now after I deactivated a "scroll to top"-plugin, but it's still there. I'd like to get rid of the expansion-thing so that the themes content starts narrowing from 900px width and not expands to (maybe about 1000px?) before it starts to shrink.

Was that easier understand? Sorry for my bad english...

[mort1m]

Done - thanks again for the heads up!

[mort1m]

Thanks Lynne, that did the trick 🙂 Most kind of you!

Regards, Morten.

[Author]

Posts