Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • September 18, 2015 at 11:59 pm #505802
    ojasray

    Hello,
    I have a fullscreen slider with a 1500×1500 image – similar to your demo. however when users with different browser window come to the site – the image does not transform / become responsive – Same issue on mobile – the image is like cut off

    September 19, 2015 at 8:11 pm #505968
    Elliott

    Hey ojasray!

    That is the correct behaviour. It will zoom in a bit to preserve image quality. If you want the whole image to display on all screen sizes and have it’s height auto adjust then use the fullwidth easy slider instead of the fullscreen slider.

    Regards,
    Elliott

    September 19, 2015 at 8:15 pm #505973
    ojasray

    Elliott

    When I use that feature see what happens – link is in the private content

    It basically removes the formatting of the title below.

    September 20, 2015 at 8:25 pm #506122
    Basilis

    Hey!

    Seems that there is no media queries there, to control that design.
    We would need to check it live to be sure, although…

    Regards,
    Basilis

    September 24, 2015 at 6:19 pm #508644
    mike1270

    I’m having the same issue:

    http://dr-schauer.com/drschauer2015/

    The top photo will not resize if viewed on the iphone.

    September 25, 2015 at 10:12 am #508860
    Rikard

    Hey @mike1270,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Regards,
    Rikard

    October 9, 2015 at 12:59 pm #516397
    mike1270

    Not a problem …..

    October 12, 2015 at 5:28 am #517103
    Rikard

    Hi,

    Thanks for the login. I see your problem, you might have to create a section with an image adapted to phone sizes, would you be able to do that? We can then show/hide the correct section for the corresponding screen size.

    Best regards,
    Rikard

    October 12, 2015 at 1:18 pm #517315
    ojasray

    Hi – I would need help doing that – and i have no clue how to

    October 12, 2015 at 9:44 pm #517717
    mike1270

    Hello Rikard,

    thanks for looking. How can I do it myself? Can I do this at all? Because I can’t find any settings that say “show me only on iphones”.

    Sure I can make the image that is optimized for the iphone. But how can I put this in myself, so only that section shows on iphones?

    Mike

    October 13, 2015 at 10:15 am #517924
    Rikard

    Hi,

    If you have your content in Color Sections and add IDs to them: section-desktop for the one showing for desktop and section-phone for the one just showing for phones you can use the following CSS in Quick CSS:

    @media only screen and (min-width: 768px) {
 #section-desktop {
display:block !important;
}
 #section-phone {
display:none !important;
}
}

@media only screen and (max-width: 767px) {
 #section-desktop {
display:none !important;
}
 #section-phone {
display:block !important;
}
}

    Regards,
    Rikard

    October 17, 2015 at 1:52 pm #520405
    mike1270

    Thank your for the help,

    but this only works in part for me because the first image of the page is a fullwidth-slider which I can not put into a section. (and therefore not able to assign a ID to it).

    October 18, 2015 at 9:04 am #520558
    Rikard

    Hi,

    It has an ID already, try this instead of #section-desktop: 

    #fullscreen_slider_0

    Regards,
    Rikard

    October 20, 2015 at 6:48 pm #521963
    mike1270

    Thank you,

    this works perfectly in combination Fullscreen Slider and Color Section which is on top of the page.

    But since I also have the combination Color Section / Color Section (one Color Section with phone optimized photo, the other one for the desktop) on the One Pager. How do I have to change the CSS so that both combinations work on that page?

    Last question – then I’m through.

    Mike

    October 21, 2015 at 8:33 am #522170
    Rikard

    Hi,

    You can use the same code I posted before and just replace the IDs, if you should have problems then please point out the relevant sections and which one you want to hide/show for mobile.

    @media only screen and (min-width: 768px) {
 #section-desktop {
display:block !important;
}
 #section-phone {
display:none !important;
}
}

@media only screen and (max-width: 767px) {
 #section-desktop {
display:none !important;
}
 #section-phone {
display:block !important;
}
}

    Regards,
    Rikard

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.