New Landing › How can we help? › Themeforest Theme Support › Dante › Image not resizing on mobile when Parallx Image Height is Windows Height

Viewing 13 posts - 1 through 13 (of 13 total)
  • Back to forum
    Posted in: Dante
  • January 9, 2015 at 8:27 pm #140485
    mmotif
    Member
    Post count: 25

    I have a ROW Parallax image and I have set the Parallax Image Height to “Windows Height” because I need to display the whole image (home1.png). However with this mode the image is not correctly resized for mobile or even on the PC if the window is resized to a narrow window (home2.png) . If I change however the Parallax Image Height to “Content Height”, I loose a crucial element of my image, the typewriter (home3.png). However the resizing works better, albeit not perfect (home4.png), because the textbox does not resize correctly.
    Now the question is: how can I get the correct resizing with the Windows Height setting?

    Thanks
    Andre

    Attachments:
    You must be logged in to view attached files.
    January 12, 2015 at 11:44 am #140877
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Hi,

    Will have to forward this topic to the development team.
    Let’s wait for the reply.

    -Rui

    January 12, 2015 at 4:53 pm #140992
    Swift Ideas – Ed
    Keymaster
    Post count: 15264
    This reply has been marked as private.
    January 13, 2015 at 4:32 pm #141231
    mmotif
    Member
    Post count: 25

    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.
    January 16, 2015 at 6:10 pm #142123
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi @mmotif

    Apologies for the delayed reply.

    As you can see in your screenshot – the extra height on the Window Height setting, means that the background image has to have a larger height – which in turn increases the width. This is why it is cut off on both sides.

    – Ed

    January 19, 2015 at 7:44 pm #142515
    mmotif
    Member
    Post count: 25

    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.
    January 19, 2015 at 11:30 pm #142547
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi Andre,

    The difference with that link, is that the hero area is not a background image, and as such the area scales as the viewport is decreased – this means that the image is not cut off in any way.

    With a background image, the way the css works for this is the background image has to cover the whole area, and seeing as that is window height, it has to work from the height of the area, and that means that the two sides will be cut off.

    Only thing I can think is to adjust the styling, by adding this custom css:

    @media only screen and (max-width: 767px) {
.home .sf-parallax .blank_spacer {
height: 20px!important;
}
.home .sf-parallax .transbox {
margin-top: 20px;
}
.home .sf-parallax p.impact-text-large {
font-size: 20px;
line-height: 30px;
}
}

    Let me know if that helps.

    – Ed

    January 20, 2015 at 8:36 pm #142825
    mmotif
    Member
    Post count: 25

    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

    January 20, 2015 at 10:00 pm #142842
    mmotif
    Member
    Post count: 25

    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

    January 21, 2015 at 1:21 am #142874
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    If you change the code to this it may help with iPad:

    @media only screen and (max-width: 1024px) {
.home .sf-parallax .blank_spacer {
height: 20px!important;
}
.home .sf-parallax .transbox {
margin-top: 20px;
}
.home .sf-parallax p.impact-text-large {
font-size: 20px;
line-height: 30px;
}
}

    If you include the typewriter text as an image within the asset, that would work too, and resize.

    – Ed

    January 21, 2015 at 1:32 am #142875
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Only just seen the follow up, glad you sorted it!

    – Ed

    January 21, 2015 at 5:24 pm #143165
    mmotif
    Member
    Post count: 25

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

    January 21, 2015 at 5:54 pm #143177
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    No problem. Thanks Ed.
    -Rui

  • Back to forum
    Posted in: Dante
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register