[mmotif]

Yep, thanks again. I’m closing this out.

[mmotif]

I wanted to give you another update.
I separated the “typewriter” text from the background image and put it into its own image element. So now I have the textbox and the typewriter text floating above the background image. If I resize, the typewriter text will resize correctly which gives me at least a readable text when I resize or on the iPad. This workaround is not a 100% perfect, but so far comes closest to what I had in mind.
And it doesn’t need the whole font business.

Thanks again for your help. You stirred me in the right direction.
Andre

[mmotif]

Thanks Ed,
I think I’m getting my head around this resizing business step-by-step. I’ve tried to put my image into just an image element and it did resize perfectly just as you said, but of course it didn’t cover the whole width. I’m getting that now.
Now, your CSS changes helped the resizing issue on the PC, but it didn’t help on the iPad. I’m working on some other changes to get around this problem.
One would be to put the “typewriter” text into a textbox. The problem with this is that I don’t know how to include the font into the theme. That’s one reason why it’s on the image. It’s not a Google font and they don’t even have one like this. In Dante I can’t find function to add another font.
The other thing I’m changing is cut the length of “typewriter” text and make it a two-liner centered in the image. At least that’ll keep the text readable even if parts of the image are cut off.

Thanks for being patient while I’m learning on the fly.
Andre

[mmotif]

Hi Ed,
Well, don’t get me wrong, but shouldn’t a responsive design take care of all of this? Maybe my view on this is too simple, but I expect the theme to take the image and resize it according to the window or device size. Just by pure coincidence I came across a webpage – http://ubergrid.karevn.com/support/ – that also has a typewriter image with text (uber1). I can resize the window to what looks like an iPad size and the image goes perfectly along (uber2). I can even resize it to the smallest possible size on a PC (uber3) and the image still goes along. No cutting left and right and the text is readable.
Of course I don’t know how this was implemented but you can go to the website and see for yourself. That’s exactly how I want my image to resize.
So the question is: What do I have to do to get this result in Dante? Do I have to have a certain aspect ratio for the image? Do I have to implement it differently than what I use now? Is the parallax the problem? Or is the theme not capable of providing this functionality?

I would really appreciate if you could give me some more details. This is the only area so far where I have problems with the theme, but it’s an important one.

Thanks
Andre

Attachments:

You must be logged in to view attached files.

[mmotif]

Ed,
I installed the version you’ve send, but it didn’t solve the issue. I have attached two images resized to the same size on a PC. One is the background image with “content-height” which shows that the whole image is resized to fit the window.
The second is with “window-height” showing that the image is not resized to fit the window. So, what actually did you fix in the version you’ve send me? I try to make sense what you say about aspect ratios, but I don’t understand why the resizing of the image can work with content-height and not with window-height.
I understand, that once I resize to a certain threshold, that the sides will be cut off, for example iPhone size, but in my example both windows are the same size.

Andre

Attachments:

You must be logged in to view attached files.

[mmotif]

Thanks Kyle. Why didn’t I think of the spacer element??
I think I’m alright now. I got the transparent box over the parallax working the way I want it.
I’m closing this up.

[mmotif]

Ohh, got it. I never even looked at that button in the editor. And in general it works. However, what is the best way to control the positioning of the text box in relation to the background image in the parallax element? I’d like to have it right in the middle and then move up when scrolling.
I tried with 1/4 1/2 1/4 content boxes, but they appear at the top. And I have to style the 1/4 differently than the 1/2 because the 1/4 should be invisible.

Another question is what is the difference between having a ROW-Parallax and just the Parallax element. When do you use the Layout elements vs. the Element assets?
I couldn’t find anything about the Layout in the documentation.

Thanks for your help
André

[mmotif]

Well, maybe I’m missing something but I don’t see an asset ROW in the elements selection in the content editor (pls. see screen shot). I’ve searched the theme up and down and feel kind of stupid right now 🙁
Thanks

Attachments:

You must be logged in to view attached files.

[mmotif]

I’m sorry, but what is a Row asset. I wasn’t able to find anything in the documentation. This my first site with Dante, so if you explain or stir me in the right direction, please.
Thanks

[mmotif]

Well, I’ve found the solution to my first question myself. I added a class to the box an then added this custom CSS

.transbox {
opacity: 0.6;
}

However, I don’t know how to do this in combination with a Parallax image. There is no shortcode for a boxed content in the shortcode pulldown.